Angular FormArray计算值异常：valueChanges未获取最新值

嘿，我碰到过这个问题好几次了，这大概率是因为你获取值的时机或者方式不对！咱们一步步拆解问题，搞定它：

核心问题：你可能用错了获取最新值的方式 #

当你订阅FormArray的valueChanges时，Angular会把最新的数组值直接通过回调参数传给你，这是最可靠的获取更新后值的方式。如果此时你反而去调用this.frm.get('arr').value，有时候会因为Angular变更检测的同步顺序问题，拿到的还是旧值——这就是你改了值但总和还是10的原因！

错误示例（拿到旧值） #

this.frm.get('arr').valueChanges.subscribe(() => {
  // 这里的value可能还是变更前的旧值
  const arrValue = this.frm.get('arr').value;
  const sum = arrValue.reduce((acc, curr) => acc + curr, 0);
  console.log(sum); // 输出10而不是11
});

正确示例（拿到最新值） #

直接用回调里的参数计算：

this.frm.get('arr').valueChanges.subscribe((latestArr) => {
  const sum = latestArr.reduce((acc, curr) => acc + curr, 0);
  console.log(sum); // 现在会正确输出11
});

另外两个可能的坑 #

1. 你修改值的方式不对 #

如果是直接修改数组元素而不是通过FormArray的API，Angular根本不知道值变了，valueChanges都不会触发！

• 错误做法：直接改数组

const arr = this.frm.get('arr').value;
arr[0] = 1; // 这种修改不会触发FormControl的变更通知

• 正确做法：用FormArray的控件API修改

// 先把FormGroup的控件转成FormArray类型
const arrControl = this.frm.get('arr') as FormArray;
// 修改对应索引的控件值
arrControl.at(0).setValue(1);

2. 修改值时用了emitEvent: false #

如果修改值的时候加了这个选项，valueChanges不会收到任何通知，自然不会更新计算结果：

arrControl.at(0).setValue(1, { emitEvent: false }); // 关闭了事件推送

这种情况要么去掉这个选项，要么手动触发变更：

arrControl.at(0).setValue(1, { emitEvent: false });
arrControl.updateValueAndValidity(); // 手动触发值变更通知

总结一下 #

• 永远优先用valueChanges回调里的参数作为最新值
• 必须通过FormArray的API修改控件值，别直接操作数组
• 检查是否误加了emitEvent: false导致事件不推送

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