Angular+TypeScript向数组添加元素时已有列表同步变更如何解决

问题原因 #

你遇到的是JavaScript引用类型赋值的共性问题：你的this.formular是对象类型，直接执行FORMULARLIST.push(this.formular)时，数组里存入的不是对象的副本，而是和页面双向绑定的this.formular共用同一个内存地址的引用。所以只要输入框通过[(ngModel)]修改this.formular的属性，数组里指向同一个地址的对象属性也会同步更新。

解决方案 #

添加元素时创建一个全新的对象副本存入数组，切断原有引用关联即可，你的formular接口所有属性都是基础类型，用浅拷贝就能满足需求：

addNew(){
  // 用扩展运算符创建新对象，拷贝当前this.formular的所有属性
  FORMULARLIST.push({...this.formular});
  // 可选操作：添加完成后重置表单对象，方便下次输入新内容
  this.formular = {
    id: FORMULARLIST.length + 1, // 可根据自己的规则生成新id
    name: '',
    mobileNumber: null,
    secondMobileNumber: null,
    email: '',
    secondEmail: '',
    roomNumber: '',
    task: ''
  };
}

也可以用Object.assign实现同样的拷贝效果：

addNew(){
  FORMULARLIST.push(Object.assign({}, this.formular));
}

调整后再修改输入框内容，只会修改当前绑定的this.formular对象，不会影响已经存入数组的历史元素。

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