Angular克隆mat-table嵌套数据源后原数据被更新的问题求助

核心问题排查 #

你遇到的问题大概率不是克隆方法本身失效，而是以下某个环节导致原数据和克隆数据仍共享嵌套对象的引用：

• 修改克隆数据时，直接引用了原数据的嵌套属性
• 自定义克隆函数存在上下文或原型链丢失问题
• 数据源（如MatTableDataSource）的赋值方式未彻底切断引用

针对性解决步骤 #

1. 检查克隆后的数据修改逻辑 #

确保修改克隆体时，没有直接赋值原数据的嵌套对象：

// ❌ 错误：直接引用原嵌套对象，导致共享引用
this.reservedDataSource.data[0].nested = this.dataSource.data[0].nested;

// ✅ 正确：直接操作克隆体的嵌套属性
const clonedData = structuredClone(this.dataSource.data);
clonedData[0].nested.value = "更新后的值";
this.reservedDataSource.data = clonedData;

2. 修复自定义deepClone函数 #

你的自定义克隆函数存在两个潜在问题：bind(this)可能导致上下文丢失，以及未保留原对象的原型链（如果是自定义类实例）。修改后版本：

deepClone(obj: any): any {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 数组处理用箭头函数保留上下文
  if (Array.isArray(obj)) {
    return obj.map(item => this.deepClone(item));
  }
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  // 保留原对象的原型链，避免丢失类方法/属性
  const clonedObj = Object.create(Object.getPrototypeOf(obj));
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clonedObj[key] = this.deepClone(obj[key]);
    }
  }
  return clonedObj;
}

3. 正确处理Angular数据源（如MatTableDataSource） #

如果使用的是Angular Material的表格数据源，确保彻底替换data数组：

// 方式1：重新实例化数据源
this.reservedDataSource = new MatTableDataSource(structuredClone(this.dataSource.data));

// 方式2：替换已有数据源的data属性
this.reservedDataSource.data = structuredClone(this.dataSource.data);

4. 验证克隆是否彻底 #

克隆后可通过内存地址对比，确认嵌套对象已完全独立：

const originalNested = this.dataSource.data[0].nestedProp;
const clonedNested = this.reservedDataSource.data[0].nestedProp;
console.log(originalNested === clonedNested); // 输出false则说明克隆成功

补充说明 #

• structuredClone是ES2022原生方法，支持大部分嵌套类型（包括Date、Map、Set），是深克隆的首选方案
• JSON.parse(JSON.stringify())会丢失函数、Date对象的类型（转为字符串），不建议用于复杂数据
• 如果你的数据包含自定义类实例，必须保留原型链，否则可能出现意料之外的引用问题

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