在Angular中动态地向表添加行

Question

我有一个表,并希望动态地向该表添加一行.以下是我的代码!

<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>

Answer 1

Angular是一个框架,其主要目的是在模型更改时更新视图.这些模板代表了一种简单的方法来"教授"角度如何在模型发生变化时更新实际DOM(在应用程序的运行时).

您的行通过读取来呈现customerArray.

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

要添加另一行,只需添加另一个对象customerArray,Angular将自己处理更新视图.