Angular中如何基于下拉框值选中Mat Table的指定可选行

核心实现逻辑基于 Angular Material 自带的 SelectionModel 选择管理类，无需改造原有选框、保存逻辑，可直接兼容后续手动操作： #

实现步骤 #

1. 在下拉框的onChange回调方法中加入以下逻辑：

// 下拉框值变更触发方法，入参为下拉框当前选中值
onDropdownChange(selectedVal: any) {
  // 清空当前所有已选中行，满足「仅勾选指定行」的需求
  this.selection.clear();

  // 按你的业务规则筛选需要自动勾选的行，示例为选中position为1、2的行，可根据下拉值自行调整筛选逻辑
  const targetRows = this.dataSource.data.filter(row => {
    return [1, 2].includes(row.position);
  });

  // 批量选中目标行
  targetRows.forEach(row => this.selection.select(row));
}

2. 注意事项：筛选目标行时必须使用dataSource.data中的原始对象实例，不能自行创建结构相同的新对象传入select方法，SelectionModel是按对象引用判断选中状态的，新创建的对象和表格数据源的对象引用不一致会导致勾选不生效。

兼容性说明 #

上述实现不会破坏原有功能：

• 自动勾选完成后，用户仍然可以自由手动勾选/取消任意行
• 保存按钮直接调用this.selection.selected即可获取最新的选中行数据，原有保存逻辑无需修改

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