Angular Material Table提交时如何仅提交被选中的行数据

mat-table 及 MatTableDataSource 没有专门的内置方法直接过滤提交选中行，但可以通过以下两种极简方案实现需求：

方案1：直接过滤现有数据源（适合你当前的代码结构） #

你当前每行数据已经自带selected标记，提交前仅需对数据源做一次过滤即可：

// 表单提交逻辑中加入这段代码
const submitData = myTableData.filter(item => item.selected);
// 后续将submitData提交给后端即可

如果不需要把selected字段传给后端，可加一步映射删除字段：

const submitData = myTableData
  .filter(item => item.selected)
  .map(({selected, ...rest}) => rest);

如果你的数据源是绑定在MatTableDataSource实例上，替换myTableData为yourDataSource.data即可。

方案2：使用SelectionModel管理选中状态（官方推荐写法） #

如果你的表格复选框是按照Angular Material官方示例用SelectionModel维护选中状态，可直接调用内置属性获取选中行，无需手动遍历：

基础定义 #

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

// 组件类内定义多选模型，第一个参数true代表支持多选
selection = new SelectionModel<any>(true, []);

提交时直接取选中数据 #

const submitData = this.selection.selected;

这种方案不需要侵入原始数据加selected字段，耦合度更低，适合复杂表格场景使用。

内容的提问来源于stack exchange，提问作者js-newb