时间戳

首页 > 解决方案 > 在反应式中动态添加行

angular - 在反应式中动态添加行

问题描述

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

html表

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

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

有什么建议么。

标签： angularangular-reactive-forms

解决方案

您可以在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时才会创建包含总计的行）

推荐阅读