You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular Material表格如何通过initialSelection实现行预选中?

Angular Material Table 行预选中实现指南

完全可以通过SelectionModel的initialSelection参数实现表格行的预选中功能!我自己测试验证后,总结出关键的用法细节:

  • 必须保证initialSelection传入的是绑定到mat-table的dataSource数据数组的子集——这里的核心是对象引用一致,预选中的行数据必须直接来自数据源数组,不能是结构相同但内存引用不同的新对象,否则SelectionModel无法正确匹配并选中目标行。

举个简单的实现示例:

// 定义表格数据源
const tableDataSource = [
  {id: 1, title: '示例条目1'},
  {id: 2, title: '示例条目2'},
  {id: 3, title: '示例条目3'}
];

// 初始化SelectionModel,预选中第2条数据(直接从数据源中取对应元素)
const selectionModel = new SelectionModel<any>(true, [tableDataSource[1]]);

另外补充一个重要信息:官方已经更新了相关示例代码,你可以查看项目内app/table-selection-example.ts文件的第21-25行,里面有更规范的官方实现参考。

内容的提问来源于stack exchange,提问作者tprieboj

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 10:15:13