Angular中FormArray的总计计算实现方案咨询

1. 定义数据模型 #

首先在组件中定义每行的数据结构，包含num1、num2和subtotal三个字段：

interface RowData {
  num1: number;
  num2: number;
  subtotal: number;
}

接着初始化行数据数组：

rows: RowData[] = [{ num1: 0, num2: 0, subtotal: 0 }];

2. 实现单行小计自动计算 #

编写计算单行小计的方法，处理空值避免出现NaN：

calculateSubtotal(row: RowData): void {
  row.subtotal = (row.num1 || 0) * (row.num2 || 0);
}

在模板中，为num1和num2的输入框绑定input事件，实时触发小计计算：

<tr *ngFor="let row of rows; let i = index">
  <td><input type="number" [(ngModel)]="row.num1" (input)="calculateSubtotal(row)"></td>
  <td><input type="number" [(ngModel)]="row.num2" (input)="calculateSubtotal(row)"></td>
  <td>{{ row.subtotal }}</td>
  <td><button (click)="rows.splice(i, 1)">删除</button></td>
</tr>

3. 新增行功能 #

添加新增行的方法，初始化新行的默认值：

addRow(): void {
  this.rows.push({ num1: 0, num2: 0, subtotal: 0 });
}

在模板中添加触发按钮：

<button (click)="addRow()">新增一行</button>

4. 计算总计 #

使用数组reduce方法求和所有行的小计：

getTotal(): number {
  return this.rows.reduce((total, row) => total + (row.subtotal || 0), 0);
}

在模板中展示总计：

<div class="total">总计：{{ getTotal() }}</div>

5. 必要模块导入 #

由于使用了ngModel双向绑定，需要在模块中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块
    FormsModule
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Alluring