Angular 2+Angular Material表格行互移功能遇重复数据问题

嘿，这个重复行的坑我之前踩过！大概率是你在转移行的时候没处理好数据源的更新逻辑，或者表格没有正确识别行的唯一性，我给你一步步捋清楚怎么解决：

1. 核心问题：转移时未从原数组移除选中行 #

很多时候重复是因为你只把选中行添加到目标表格的数据源，但没从原表格的数据源里删掉这些行，导致下次操作时原数组里还留着之前的行，再次添加就重复了。

正确的转移函数写法 #

假设你用selectionModel来管理选中行（Angular Material表格的标准做法），组件里的代码应该是这样：

import { SelectionModel } from '@angular/cdk/collections';

// 定义数据源和选中模型
table1Data: YourDataType[] = [/* 初始数据 */];
table2Data: YourDataType[] = [];
selection = new SelectionModel<YourDataType>(true, []); // 允许多选

// 移至表格2的函数
moveToTable2() {
  // 1. 将选中行添加到表格2的数据源（用concat返回新数组，触发Angular变更检测）
  this.table2Data = this.table2Data.concat(this.selection.selected);
  
  // 2. 从表格1的数据源中移除选中行（用filter返回新数组）
  this.table1Data = this.table1Data.filter(item => 
    !this.selection.selected.includes(item)
  );
  
  // 3. 清空选中状态，避免下次操作重复选中
  this.selection.clear();
}

// 移至表格1的反向函数
moveToTable1() {
  this.table1Data = this.table1Data.concat(this.selection.selected);
  this.table2Data = this.table2Data.filter(item => 
    !this.selection.selected.includes(item)
  );
  this.selection.clear();
}

2. 辅助优化：给mat-table设置trackBy函数 #

如果你的数据是对象数组，mat-table默认会根据对象引用识别行，当数据源更新时，可能因为引用变化或重复引用导致重复渲染。设置trackBy可以让表格通过唯一标识（比如id）来识别行，避免不必要的重复渲染。

模板中添加trackBy #

<!-- 表格1 -->
<mat-table [dataSource]="table1Data" [trackBy]="trackByRowId">
  <!-- 你的列定义 -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<!-- 表格2 -->
<mat-table [dataSource]="table2Data" [trackBy]="trackByRowId">
  <!-- 你的列定义 -->
  <mat-header-row *matHeaderRowDef="displayedColumns2"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns2;"></mat-row>
</mat-table>

组件中定义trackBy函数 #

trackByRowId(index: number, row: YourDataType): number {
  return row.id; // 假设你的数据有唯一的id字段，替换成你实际的唯一标识
}

3. 额外检查点 #

• 确保你没有在转移时错误地把整个原数组的内容添加到目标数组（比如不小心写了this.table2Data = [...this.table1Data]而不是选中行）
• 如果你的数据是通过API获取的，检查是否每次转移后数据源有没有被意外重置

按照上面的步骤改完，应该就能解决重复行的问题啦！

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