TypeScript：数量/价格变动时自动更新总价的函数调用问题

先给你揪出几个关键问题，一步步来修复：

1. 总价计算函数的基础错误 #

你的totalFunc()里犯了一个低级错误——循环时直接把Total赋值为当前商品的金额，而不是累加所有商品的金额！这会导致最终总价只等于最后一个商品的金额，完全不符合预期。先把这个函数修正：

totalFunc() { 
  let total = 0; 
  // 要遍历表单数组里的控件值，而不是原始products数据（表单值才是用户修改后的最新值）
  const productControls = this.form.get('products') as FormArray;
  productControls.controls.forEach(control => {
    const price = control.get('Unit_price')?.value || 0;
    const quantity = control.get('Quantity')?.value || 0;
    total += price * quantity;
  });
  // 把计算结果同步到表单的total控件中
  this.form.get('total')?.setValue(total);
  return total; 
}

2. 缺少表单控件变化监听 #

这是核心问题：你没有监听商品单价/数量控件的变化，所以用户修改值时，不会自动触发总价计算。需要在组件初始化时添加监听逻辑，同时确保商品数据正确绑定到表单数组。

第一步：正确初始化商品表单数组 #

把从ps.getProduct()获取的商品数据，转换成FormArray里的FormGroup，让表单控件和数据真正绑定：

ngOnInit() {
  this.products = this.ps.getProduct();
  const productFormArray = this.form.get('products') as FormArray;
  
  // 遍历原始商品数据，生成对应的表单控件组
  this.products.forEach(product => {
    productFormArray.push(this.fb.group({
      Unit_price: [product.Unit_price, Validators.required],
      Quantity: [product.Quantity, Validators.required]
      // 其他商品字段如果需要绑定，也在这里添加
    }));
  });

  // 初始化计算一次总价
  this.totalFunc();
  // 启动监听，自动更新总价
  this.watchProductChanges();
}

第二步：添加表单变化监听 #

写个方法监听商品表单数组的变化，只要单价或数量改动，就自动计算总价：

watchProductChanges() {
  const productFormArray = this.form.get('products') as FormArray;
  // 监听整个表单数组的变化，自动触发总价计算（新增/删除商品也能覆盖）
  productFormArray.valueChanges.subscribe(() => {
    this.totalFunc();
  });

  // 如果需要更精细的单个控件监听，可以用下面的代码（可选）
  // productFormArray.controls.forEach(control => {
  //   control.get('Unit_price')?.valueChanges.subscribe(() => this.totalFunc());
  //   control.get('Quantity')?.valueChanges.subscribe(() => this.totalFunc());
  // });
}

3. 模板绑定要对应表单控件 #

确保你的HTML模板里是绑定到表单控件，而不是原始的products数据，比如：

<form [formGroup]="form">
  <div formArrayName="products">
    <div *ngFor="let product of form.get('products')['controls']; let i = index" [formGroupName]="i">
      <input formControlName="Unit_price" type="number" placeholder="单价">
      <input formControlName="Quantity" type="number" placeholder="数量">
    </div>
  </div>
  <div>
    总价: <input formControlName="total" readonly>
  </div>
</form>

最后检查点 #

• 确认ps.getProduct()返回的商品对象字段名和代码里一致（比如是Unit_price还是unitPrice，大小写别错）
• 如果支持动态添加/删除商品，记得新增商品FormGroup时，productFormArray.valueChanges会自动监听新控件，不需要额外处理

这样修改后，用户修改单价或数量时，表单的变化会自动触发总价计算并更新啦！

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