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是一个框架，其主要目的是在模型更改时更新视图。模板代表一种简单的方法，可以“教” Angular如何在模型发生更改时（在应用程序运行时）更新实际DOM。

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

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

要添加另一行，只需将另一个对象添加到customerArray中，Angular将自行处理更新视图。

Answer 2

来自Angular2 : render a component without its wrapping tag

如果您想在表格中添加一个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>

在Angular中将行动态添加到表

2 个答案: