如何避免Angular 2中Mat-Table重复转移行数据

嘿，这个重复添加的问题我之前在做Angular Material表格的时候也踩过坑！核心原因就是咱们没做重复校验，每次点击都直接把选中行塞进去了，自然会出现重复项。下面给你几个实用的解决思路，按需选就行：

如果你的表格数据对象有唯一标识（比如id这类字段），这是最可靠的去重方式。每次转移前先判断目标数组里是否已经存在相同ID的项，只有不存在的时候才添加。

举个具体的代码示例：
假设你的源数据数组是sourceData，选中的行集合是selectedRows，用来展示已转移行的目标数组是transferredRows。在「Transfer Rows」按钮的点击处理函数里这么写：

onTransferRows() {
  this.selectedRows.forEach(row => {
    // 通过唯一id判断目标数组中是否已存在该行
    const isDuplicate = this.transferredRows.some(transferredRow => transferredRow.id === row.id);
    if (!isDuplicate) {
      this.transferredRows.push(row);
    }
  });
  // 可选：转移完成后清空选中状态，避免用户重复操作同一批行
  this.selection.clear();
}

如果你的数据是值类型，或者选中的行和已转移的行是同一引用的对象（比如直接从源数组里选中的原对象），可以用ES6的Set来自动去重，因为Set不允许存储重复的引用或值：

onTransferRows() {
  // 合并已转移行和新选中行到Set中自动去重
  const uniqueRowsSet = new Set([...this.transferredRows, ...this.selectedRows]);
  // 把Set转回数组赋值给目标数组
  this.transferredRows = Array.from(uniqueRowsSet);
  // 清空选中状态
  this.selection.clear();
}

注意：这个方法有局限性——如果你的行数据是克隆后的对象（引用不同但内容相同），Set会把它们当成不同的项，这时候还是方案1更稳妥。

如果你的数据没有唯一ID字段，或者需要基于多个字段来判断是否重复，可以写一个自定义的比较函数：

// 自定义函数：判断两行是否为同一数据项
isRowDuplicate(rowA: any, rowB: any): boolean {
  // 这里根据你的实际数据结构写判断逻辑，比如比较姓名、年龄、邮箱等关键字段
  return rowA.name === rowB.name && rowA.age === rowB.age && rowA.email === rowB.email;
}

onTransferRows() {
  this.selectedRows.forEach(row => {
    const isDuplicate = this.transferredRows.some(transferredRow => this.isRowDuplicate(transferredRow, row));
    if (!isDuplicate) {
      this.transferredRows.push(row);
    }
  });
  this.selection.clear();
}

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