javascript - 如何在 mat-table 页变化时选中复选框？

我正在使用 Angular Material 开发一个表格，用户可以通过复选框选择行。到目前为止，当表格包含所有数据时，逻辑运行良好，翻页也不会影响选择。但是，当我切换到服务端分页时，dataSource 变成了动态的，复选框在返回到之前/下一页已选中的行时没有在视图中显示。我已经检查过，即使在翻页时，selection.selected 仍然保存着值，但问题是为什么它没有在视图中显示。

private setupCheckboxIfPageChange() {
  console.log(1);
  const selected: TestTable[] = this.selection.selected;
  this.selection.clear();
  this.selection.select(...selected);
}

这个函数是我写的，并在 API 订阅中调用。这是我尝试的示例。

答案＃1

它不起作用是因为 SelectionModel 默认使用严格相等（===），而你在模型中存储的是对象。当你使用两个由不同 API 调用返回的独立对象时，即使所有属性相同，它们也永远不会相等。为避免此问题，你应该只在选择模型中存储所选项的 ID。这也会让你的应用更快，因为内存中存储的数据更少。

更新的 Stackblitz: https://stackblitz.com/edit/stackblitz-starters-gxci92

如果你需要选择模型保存整个对象，请查看另一个答案。

答案＃2

你可以在 ngOnInit() 中添加

this.selection.compareWith=(a:TestTable,b:TestTable)=>a.id==b.id;

否则，由于对象不同，结果为假