Динамически добавлять строки в таблицу в Angular - PullRequest
Новая
       6

Динамически добавлять строки в таблицу в Angular

0 голосов
/ 30 ноября 2018

У меня есть таблица, и я хотел бы динамически добавить строку в эту таблицу.Ниже приведен мой код! 

<tr *ngIf="customer">
  <td>4</td>
  <td>
    <input type="text" name="firstName" required minlength="2">
  </td>
  <td>
    <input type="text" name="lastName" required minlength="2">
  </td>
  <td>
    <input type="text" name="countryCode" required maxlength="2">
  </td>
  <td>
    <input type="number" name="age" required minlength="2">
  </td>
  <td>
    <i class="fas fa-times" (click)="cancel()"></i>
  </td>
  <td>
    <i class="far fa-save" (click)="save()"></i>
  </td>
</tr>

Под таблицей должна быть добавлена ​​строка выше.является селектором, который содержит вышеупомянутый HTML (единственная строка таблицы, которая будет добавлена).В настоящее время при нажатии кнопки указанная выше строка появляется в самом низу страницы, а не добавляется в таблицу, как предполагалось. 

<table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Country</th>
            <th scope="col">Gender</th>
            <th scope="col">Age</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let customer of customerArray; let i = index">
            <td>{{i + 1}}</td>
            <td>{{customer.firstName}}</td>
            <td>{{customer.lastName}}</td>
            <td>{{customer.countryCode}}</td>
            <td>{{customer.gender}}</td>
            <td>{{customer.age}}</td>
            <td><i class="fas fa-edit" (click)="editCustomer()"></i></td>
            <td><i class="fas fa-trash-alt" (click)="deleteCustomer(customer)"></i></td>
          </tr>
          <add-edit-customer></add-edit-customer>
        </tbody>
      </table>

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

из Angular2: рендеринг компонента без тега переноса

Если вы хотите добавить tr в таблицу, ваш компонент может выглядеть как 

@Component({
  selector: '[add-edit-customer]',  //<--see you enclosed the name by []
  template: `<td><input ...></td>  //see you don't include tr tag
             <td><input ...></td>`
})

Иваш .html 

<tbody>
   <tr *ngFor="let customer of customerArray; let i = index">
      <td>{{i + 1}}</td>
      ...
   </tr>
   <!-- see that add-edit-customer is a especial "tr"-->
   <tr add-edit-customer></tr>
</tbody>
0 голосов
/ 30 ноября 2018

Angular - это фреймворк, основной целью которого является обновление вида при изменении модели.Шаблоны представляют собой простой способ «научить» Angular, как следует обновлять фактический DOM (во время выполнения приложения) всякий раз, когда происходит изменение в вашей модели.

Ваши строки отображаются путем чтения из customerArray. 

<tr *ngFor="let customer of customerArray; let i = index">

Чтобы добавить еще одну строку, просто добавьте еще один объект в customerArray, и Angular самостоятельно выполнит обновление представления.

...