Ng2-Dragula自定义过滤器失效：拖拽数据实例关联错误问题

作为刚接触Angular的开发者，你遇到的这个问题其实很典型——核心原因是拖拽传递的是源数据对象的引用，而非独立副本，这就导致目标表格里的行和源表格的原始实例死死绑定在一起，当源表格做过滤操作后，要么拖拽时拿到了错误的原始对象，要么后续源数据变化会意外影响目标数据。咱们一步步拆解解决：

一、问题根源拆解 #

Angular里用Array.filter()做数据过滤时，返回的是源数组中符合条件对象的引用，不是全新的对象实例。举个例子：你过滤出状态为“已完成”的行，这些行其实还是原始FinedTunedData数组里的同一个对象，只是被筛选出来展示而已。这时候拖拽这些行，本质上还是把原始对象的地址传给了目标表格，一旦源数组的过滤条件变化、或者原始对象被修改，目标表格的数据就会跟着“出错”。

二、具体解决方案 #

1. 拖拽时传递对象的深拷贝 #

在触发拖拽的方法里，不要直接把源对象扔给目标表格，而是先做一个深拷贝，让目标拿到完全独立的副本：

// 错误写法：直接传递源对象引用
onDragStart(row: any) {
  this.draggedRow = row; // 目标表格会和源实例绑定
}

// 正确写法：创建深拷贝（适合纯数据对象）
onDragStart(row: any) {
  // 用JSON序列化反序列化实现深拷贝，简单直接
  this.draggedRow = JSON.parse(JSON.stringify(row));
  
  // 如果你的数据包含Date、类实例这类特殊类型，推荐用lodash的cloneDeep
  // this.draggedRow = _.cloneDeep(row);
}

2. 确保过滤后的数据源是独立数组 #

如果你的源表格绑定的是过滤后的数组，建议每次过滤都返回新数组，避免和原始数组的引用混淆：

// 错误写法：直接返回过滤后的引用片段
getFilteredData(): any[] {
  return this.FinedTunedData.filter(item => item.isValid);
}

// 正确写法：返回全新数组（可选结合深拷贝）
getFilteredData(): any[] {
  // 先过滤再解构生成新数组
  const filtered = this.FinedTunedData.filter(item => item.isValid);
  return [...filtered];
  
  // 如果需要每个对象都是独立副本，再加一层map拷贝
  // return filtered.map(item => JSON.parse(JSON.stringify(item)));
}

3. 拖拽时基于过滤后的数组取正确对象 #

如果你的拖拽是基于索引操作的，一定要确保用的是过滤后数组的索引，而不是原始数组的索引：

// 假设源表格绑定的是filteredData数组
onDragFromFilteredTable(index: number) {
  // 从过滤后的数组里拿对象，再深拷贝
  const targetRow = this.filteredData[index];
  this.draggedRow = JSON.parse(JSON.stringify(targetRow));
}

三、额外提醒 #

• 如果你的数据是自定义类的实例（不是纯JSON对象），JSON序列化会丢失类的方法和原型链，这时候需要给类写一个专门的克隆方法，比如clone(): MyClass { return new MyClass(this.prop1, this.prop2) }。
• 拖拽完成后记得清空临时保存的draggedRow，避免内存泄漏或者干扰后续操作。

这样修改后，目标表格里的行就是完全独立的副本，不管源表格怎么过滤、修改原始数据，都不会再影响到目标表格的数据啦。

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