Angular中数组副本同步变更，无法实现称呼添加撤销功能求助

你遇到的是TypeScript引用类型的浅拷贝问题：用[...empsArrayImport]复制数组时，只是复制了数组的表层结构，数组里的每个Employee对象还是指向同一个内存地址。所以当你修改empsArray里的emp.name时，empsTemp和原始的empsArrayImport里的对应对象都会跟着变——因为它们本来就是同一个对象。

要实现“添加/撤销称呼”的功能，必须确保原始数据的副本是深拷贝的：每个数组里的Employee对象都是独立的实例，修改其中一个数组的对象不会影响其他数组。同时，避免直接修改对象属性，而是通过生成新对象来实现数据转换。

1. 初始化深拷贝的数据副本 #

替换原来的数组初始化代码，用深拷贝创建独立的对象实例：

import empsArrayImport from '../Emps';

// 用扩展运算符深拷贝每个对象，生成独立数组
empsArray: Employee[] = empsArrayImport.map(emp => ({ ...emp }));
empsTemp: Employee[] = empsArrayImport.map(emp => ({ ...emp }));
showSalutation = false;

如果你的Employee对象有嵌套属性，建议用JSON.parse(JSON.stringify())做更彻底的深拷贝：

empsArray: Employee[] = JSON.parse(JSON.stringify(empsArrayImport));
empsTemp: Employee[] = JSON.parse(JSON.stringify(empsArrayImport));

2. 优化addSalutation函数 #

不再直接修改原对象，而是通过map生成新数组，切换状态时直接从原始副本重置：

addSalutation() {
  this.showSalutation = !this.showSalutation;

  if (this.showSalutation) {
    // 生成带称呼的新数组，不污染原始数据
    this.empsArray = this.empsTemp.map(emp => {
      const salutation = emp.gender === "M" ? "Mr." : "Ms.";
      // 返回新对象，保留原对象的其他属性
      return { ...emp, name: `${salutation}${emp.name}` };
    });
  } else {
    // 从原始深拷贝副本重置数组
    this.empsArray = this.empsTemp.map(emp => ({ ...emp }));
  }
}

3. 模板代码（修正语法错误） #

你原来的模板里*ngIf="showGender;""有语法错误，修正为：

<tr *ngFor="let emp of empsArray">
  <td>{{ emp.name }}</td>
  <td>{{ emp.salary }}</td>
  <td *ngIf="showGender">{{ emp.gender }}</td>
</tr>

• 深拷贝：确保每个数组里的对象都是独立的，修改一个数组不会影响其他数组。
• 生成新对象：用{...emp}创建新对象，避免直接修改原始对象的属性，从根源上防止数据污染。
• 避免filter误用：原来的代码用filter来转换数据是错误的，filter的作用是过滤元素，转换元素应该用map。

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