响应式表单总计功能异常：删除行后数值仍被计入总计

嗨，我来帮你搞定这个总计计算的bug！看了你的代码片段，问题很明确：你计算总计的时候依赖的是外部的this.totals变量，但删除行后这个变量并没有同步更新，导致旧数据还被算进了总计里。

给你两个实用的修复方案，按需选就行：

方案1：直接用表单数组的实时值计算（推荐） #

既然你已经订阅了rows的valueChanges，那完全可以利用回调里的values（也就是当前所有行的最新数据）来计算总计，根本不需要依赖this.totals。修改你的订阅逻辑：

ngOnInit(){ 
  this.myForm.get('rows').valueChanges.subscribe(values => {
    // 直接从当前表单行数据计算，加个||0防止空值报错
    this.total = values.reduce((sum, item) => sum + (item.total || 0), 0);
  });
}

这样不管是添加行、删除行还是修改行内数值，都会用最新的行数据重新计算总计，从根源上避免了数据不同步的问题，而且代码更简洁。

方案2：同步更新this.totals和表单数组 #

如果你确实需要保留this.totals这个变量，那必须在删除行的时候同步更新它。比如在你的删除方法里加上这一步：

deleteRow(index: number) {
  const rows = this.myForm.get('rows') as FormArray;
  rows.removeAt(index);
  // 同步删除totals里对应索引的元素
  this.totals.splice(index, 1);
  // 重新计算总计（或者让valueChanges自动触发也可以）
  this.total = this.totals.reduce((sum, item) => sum + item.total, 0);
}

不过这种方式需要同时维护表单数组和this.totals两个数据源，容易因为疏忽导致数据不一致，所以还是更推荐第一种方案，只用表单作为单一数据源。

小提醒：去掉多余的Promise延迟 #

你代码里的resolvedPromise.then(...)如果没有特殊业务需求的话，其实是多余的，会让总计计算延迟一个微任务周期，直接在valueChanges回调里计算响应更快哦。

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