在反应式中动态添加行答案

【问题标题】：Add row dynamically in reactive from在反应式中动态添加行
【发布时间】：2021-07-28 18:48:51
【问题描述】：

我想动态添加在 HTML 表中总共包含两行或多行的行

当表单数组中有两行或更多行时，应在总数中添加另一行。

此 HTML 表使用 ngFor 在对象数组上动态生成行。

任何建议。

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

您可以在ngFor之后添加表格行并添加ngIf来检查对象数数组中大于等于2（显示总数）

您的 html 代码将如下所示：

<tr *ngFor="let object of objects">
   <td> {{object.field1}} </td>
   <td> {{object.field2}} </td>
   <td> {{object.field3}} </td>
   <td> {{object.field4}} </td>
</tr>
<tr *ngIf="showTotal()">
   <td>Total</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
   <td>...</td>
</tr>

在您的 .ts 文件中：

showTotal(): boolean {
    return this.objects.length >= 2;
}

仅当表中的行数（即对象数）大于等于2时才会创建包含总计的行）

【讨论】：

以及何时为每个 td 添加这些总数。