Angular 2中基于Angular Material实现表格行转移功能

没问题！我来帮你搞定这个「转移选中行」的功能，核心逻辑其实很清晰——把选中的行从原表格的数据源移到目标表格的数据源，同时从原数据源中移除它们，咱们一步步来实现：

1. 确认基础变量 #

首先确保你的组件里已经有这些核心变量：

• 存储选中行的SelectionModel实例（比如selection = new SelectionModel<YourRowType>(true, []);）
• 原表格的数据源（可以是普通数组，或者MatTableDataSource实例）
• 目标表格的数据源（同样，普通数组或MatTableDataSource）

2. 编写转移函数 #

在你的组件类中添加这个转移函数：

情况1：用普通数组作为数据源 #

transferSelectedRows() {
  // 把选中行追加到目标数组
  this.targetData = [...this.targetData, ...this.selectedRows];

  // 从原数组中过滤掉已选中的行
  this.sourceData = this.sourceData.filter(row => !this.selectedRows.includes(row));

  // 清空选中状态，避免重复操作
  this.selection.clear();
}

情况2：用MatTableDataSource作为数据源 #

如果你的表格用的是Angular Material的MatTableDataSource，只需要稍微调整，更新数据源的data属性即可：

transferSelectedRows() {
  // 更新目标表格数据源
  this.targetDataSource.data = [...this.targetDataSource.data, ...this.selectedRows];

  // 过滤原表格数据源
  this.sourceDataSource.data = this.sourceDataSource.data.filter(
    row => !this.selectedRows.includes(row)
  );

  // 清空选中状态
  this.selection.clear();
}

3. 绑定按钮点击事件 #

在模板里给「转移选中行」按钮绑定这个函数：

<button mat-raised-button color="primary" (click)="transferSelectedRows()" [disabled]="!selection.hasValue()">
  转移选中行
</button>

重要注意事项 #

• 如果你的行数据是从后端获取的对象，建议用唯一ID来判断行是否选中，避免引用不一致的问题，比如把过滤逻辑改成：

  this.sourceData = this.sourceData.filter(row => 
    !this.selectedRows.some(selectedRow => selectedRow.id === row.id)
  );
  

• 给按钮加[disabled]判断，当没有选中行时禁用按钮，能提升用户体验。

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