Angular Material表格分页切换时如何保留复选框选中状态？

核心问题 #

Angular Material的SelectionModel默认通过对象引用判断是否选中，但服务端分页每次返回的是全新的对象实例（即使数据内容完全一致），导致selection.selected中存储的旧对象和当前页的新对象引用不匹配，视图无法识别这些项应该处于选中状态。

解决方案 #

1. 给SelectionModel配置自定义比较器

初始化SelectionModel时，传入基于数据唯一标识（比如id）的比较函数，让它通过id判断是否为同一数据项，而非依赖对象引用：

// 初始化时添加compareWith参数
this.selection = new SelectionModel<TestTable>(true, [], true, (a, b) => a.id === b.id);

2. 优化页面切换后的选中状态同步逻辑

修改你的setupCheckboxIfPageChange函数，直接匹配当前页数据和已选中项的id，确保视图能正确渲染选中状态：

private setupCheckboxIfPageChange() {
  const currentPageItems = this.dataSource.data;
  // 筛选当前页中属于已选中列表的项
  const itemsToSelect = currentPageItems.filter(item => 
    this.selection.selected.some(selected => selected.id === item.id)
  );
  // 标记这些项为选中
  itemsToSelect.forEach(item => this.selection.select(item));
}

3. 确保在数据加载完成后调用同步函数

在服务端分页的API请求返回、dataSource.data更新完成后，调用setupCheckboxIfPageChange，保证视图能及时同步选中状态。

原代码无效的原因 #

你之前的清空再重新选中旧对象的逻辑，本质是操作的还是之前分页的旧对象实例，和当前页的新对象引用不同。SelectionModel默认的比较逻辑只认对象引用，所以即使数据内容一样，也不会被视图识别为选中项。

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