提交FormGroup进行更新时如何更新对象列表

这个问题我之前也碰到过，核心原因是你可能误用了Object.assign或者直接用表单值替换了原有的Person实例，导致原实例中不在FormGroup里的字段（比如Age）被丢失。下面给你几个靠谱的解决办法：

方法1：直接更新原Person实例的属性 #

既然你已经有选中的Person实例，最直接的方式就是直接修改它的FirstName和LastName，完全不用碰其他字段：

// 假设你已经拿到选中的person实例
const selectedPerson = this.personArray.find(p => /* 你的选中逻辑 */);
if (selectedPerson) {
  selectedPerson.FirstName = this.yourFormGroup.get('FirstName').value;
  selectedPerson.LastName = this.yourFormGroup.get('LastName').value;
}

这种方式最直观，原实例的Age等字段会完整保留，因为你只修改了需要更新的属性。

方法2：正确使用Object.assign合并属性 #

如果你习惯用Object.assign，记得把原Person实例作为第一个参数（目标对象），表单值作为后续参数（源对象），这样只会覆盖源对象中存在的属性，不会删除目标对象的其他字段：

const selectedPerson = this.personArray.find(p => /* 你的选中逻辑 */);
if (selectedPerson) {
  // 把表单值合并到原实例，保留Age等字段
  Object.assign(selectedPerson, this.yourFormGroup.value);
}

这里要注意：Object.assign是浅拷贝，但对于你的Person类实例来说，这种方式完全够用，因为你只是更新基础类型的属性。

方法3：用扩展运算符创建新的合并对象（适合不可变更新场景） #

如果你的场景需要保持数据不可变性（比如用NgRx这类状态管理库），可以用扩展运算符把原实例的属性和表单值合并，生成新的Person实例，再替换数组中的对应元素：

const personIndex = this.personArray.findIndex(p => /* 你的选中逻辑 */);
if (personIndex !== -1) {
  // 合并原实例和表单值，保留所有原字段
  const updatedPerson = { ...this.personArray[personIndex], ...this.yourFormGroup.value };
  // 替换数组中的元素（保持不可变性）
  this.personArray = [...this.personArray.slice(0, personIndex), updatedPerson, ...this.personArray.slice(personIndex + 1)];
}

这种方式不会修改原实例，而是生成新对象，适合需要追踪数据变化的场景。

为什么原来的方法会丢失字段？ #

你之前的问题大概率是这样的：你用Object.assign({}, this.yourFormGroup.value)或者直接把formGroup.value赋值给数组元素，这样生成的新对象只有FirstName和LastName，完全没有原Person实例的Age等字段，自然就丢失了。只要记住基于原实例进行更新/合并，而不是从零创建新对象，就不会有这个问题了。

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