Angular 8动态数组变量联动问题求助（无需响应式表单）

JavaScript中数组和对象属于引用类型，直接把API返回的response同时赋值给mailConfig和tempMailConfig时，两个变量实际指向内存里的同一个数组实例。修改mailConfig内的对象属性，本质是修改内存中同一个对象的属性，所以tempMailConfig会同步变化。

你需要对API返回的数组做深拷贝，让两个变量持有独立的数组及内部对象实例，以下是两种常用实现方式：

方式1：JSON序列化/反序列化（适合普通对象数组） #

这种方法简单快捷，适用于API返回的是无函数、无循环引用的普通对象数组：

this._http.getTrainingConfigByKeys(this.mailConfigKeys).subscribe(response => {
  // 深拷贝数组及内部对象
  this.mailConfig = JSON.parse(JSON.stringify(response));
  this.tempMailConfig = JSON.parse(JSON.stringify(response));
});

方式2：手动映射数组，逐个拷贝对象（更灵活） #

如果数组中的对象包含特殊类型（如Date），可以用对象扩展运算符逐个拷贝，避免JSON序列化的副作用：

this._http.getTrainingConfigByKeys(this.mailConfigKeys).subscribe(response => {
  // 遍历数组，对每个对象做浅拷贝（对象无嵌套时足够用）
  this.mailConfig = response.map(item => ({ ...item }));
  this.tempMailConfig = response.map(item => ({ ...item }));
});

如果对象存在嵌套结构，需要递归实现深拷贝，示例如下：

private deepCopy<T>(obj: T): T {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj.getTime()) as unknown as T;
  if (obj instanceof Array) return obj.map(item => this.deepCopy(item)) as unknown as T;
  if (typeof obj === 'object') {
    const copiedObj = {} as T;
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        copiedObj[key] = this.deepCopy(obj[key]);
      }
    }
    return copiedObj;
  }
  return obj;
}

// 使用时：
this._http.getTrainingConfigByKeys(this.mailConfigKeys).subscribe(response => {
  this.mailConfig = this.deepCopy(response);
  this.tempMailConfig = this.deepCopy(response);
});

修改上述赋值逻辑后，mailConfig和tempMailConfig会各自持有独立的数组实例，通过ngModel修改mailConfig中对象的propertyValue时，tempMailConfig的对应值不会再同步变化。

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