Angular 8实现表格每行商品单价乘数量计算对应总价问题求助

问题原因 #

所有商品行共用了同一个productQty表单控件和全局的proQty变量，任意行修改都会覆盖全局值，导致所有行的计算结果同步变动。

解决方案 #

方案1：模板驱动表单（实现更简单） #

不需要全局的FormGroup和公共数量变量，直接把每行的数量绑定到对应商品对象的属性上：

TS代码

给clientProducts数组的每个商品项新增qty属性存储对应行的数量，初始化时可赋值为0，不需要额外的变更监听方法。

HTML代码

<tr *ngFor="let product of clientProducts">
    <td>{{ product.Name }}</td>
    <td>{{ product.DistributorPrice}}</td>
    <td><input type="number" class="form-control my-n1" [(ngModel)]="product.qty" /></td>
    <td>{{ product.DistributorPrice * (product.qty || 0)}}</td>
    <td>
        <button class="btn btn-success">Add</button>
    </td>
</tr>

注：使用ngModel需要先在对应模块中导入FormsModule。

方案2：响应式表单（适合表单校验需求更强的场景） #

用FormArray存储每一行的表单实例，每个商品对应独立的FormGroup：

TS代码

import { FormArray, FormGroup, FormControl, Validators } from '@angular/forms';

// 声明表单数组
clientProductForm: FormArray;

// 初始化表单，clientProducts获取完成后调用
initProductForm() {
  this.clientProductForm = new FormArray(
    this.clientProducts.map(() => new FormGroup({
      productQty: new FormControl('', Validators.required)
    }))
  );
}

// 模板中获取对应行的FormGroup
getRowForm(index: number): FormGroup {
  return this.clientProductForm.at(index) as FormGroup;
}

HTML代码

<tr *ngFor="let product of clientProducts; let i = index" [formGroup]="getRowForm(i)">
    <td>{{ product.Name }}</td>
    <td>{{ product.DistributorPrice}}</td>
    <td><input type="number" class="form-control my-n1" formControlName="productQty" /></td>
    <td>{{ product.DistributorPrice * (getRowForm(i).get('productQty').value || 0)}}</td>
    <td>
        <button class="btn btn-success">Add</button>
    </td>
</tr>

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