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
相关产品推荐
相关产品推荐

