Angular中如何阻止existingTags随existingTagsChip自动更新？

问题根源在于数组是引用类型：当你执行this.existingTags = this.existingTagsChip时，并没有复制数组的内容，只是让existingTags和existingTagsChip指向内存中的同一个数组实例。所以后续对existingTagsChip的修改（比如push新元素），会直接反映在existingTags上。

要阻止这种同步更新，你需要创建existingTagsChip的副本，让existingTags指向这个新的数组实例，具体有几种常用方式：

1. 扩展运算符（浅拷贝，推荐当前场景） #

修改editFunction中的赋值语句为：

this.existingTags = [...this.existingTagsChip];

扩展运算符会创建一个新数组，并把原数组的元素依次复制进去，适合当前数组元素是简单对象的场景。

2. Array.from()方法（浅拷贝） #

效果和扩展运算符一致，写法如下：

this.existingTags = Array.from(this.existingTagsChip);

3. JSON序列化（深拷贝，适用于嵌套对象场景） #

如果你的数组元素包含多层嵌套对象，需要完全独立的副本，可以用这种方式：

this.existingTags = JSON.parse(JSON.stringify(this.existingTagsChip));

注意：这种方法无法处理函数、Symbol、循环引用等特殊类型，但当前场景的标签对象（仅包含value和viewValue）完全适用。

修改后的完整示例代码 #

ngOnInit() {
  this.editFunction()
}

editFunction(){
  for (let i = 0; i < this.editingData["tags"].length; i++) {
    this.existingTagsDropDown.push(this.editingData["tags"][i].tag_id);
    this.existingTagsChip.push({
      value: this.editingData["tags"][i].tag_id,
      viewValue: this.editingData["tags"][i].name,
    });
  }
  // 使用扩展运算符创建副本
  this.existingTags = [...this.existingTagsChip];
}

addNewTags(){
  for (let i = 0; i < this.selectedButtonOptions.length; i++) {
    this.existingTagsChip.push({
      value: this.selectedButtonOptions[i].value,
      viewValue: this.selectedButtonOptions[i].viewValue,
    });
  }
}

这样修改后，existingTags会保持初始赋值时的数组状态，不会随existingTagsChip的更新而变化。

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