如何为Angular Material Table SelectionModel添加初始选择？

Question

Angular Material文档提供了一个很好的示例，说明如何向表中添加选择（Table Selection docs）。他们甚至提供Stackblitz进行尝试。

我在SelectionModel构造函数的代码中找到了，第一个参数是是否可以进行多个选择（真）或（假）。第二个参数是最初选择的值的数组。

在演示中，它们没有任何初始选择的值，因此其构造函数（第36行）中的第二个参数是一个空数组（[]）。

我想要更改它，以便有一个初始选择的值，因此我将第36行更改为：

selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);

这会将标头中的复选框更改为不确定状态（如预期的那样），但不会导致表中的行被选中。我是错误地设置了初始值，还是在这里遗漏了什么？如何设置初始选择的值？

Answer 1

整rick。您需要通过从dataSource输入中提取特定的PeriodicElement对象并将其传递给构造函数来初始化选择。

在这种情况下，您可以编写代码

selection = new SelectionModel<PeriodicElement>(true, [this.dataSource.data[1]);

这是因为SelectionModel检查活动选择的方式。

在表格标记中

<mat-checkbox ... [checked]="selection.isSelected(row)"></mat-checkbox>

您希望此绑定将相应的行标记为已选中。但是方法isSelected（row）不会将此处传递的对象识别为选中对象，因为这不是您的选择在其构造函数中收到的对象。

“行”指向实际MatTableDataSource输入中的对象：

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

但是选择初始化：

selection = new SelectionModel<PeriodicElement>(true, [{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}]);

发生在您动态创建的新对象上。您的选择会将此对象记住为所选对象。

当angular评估标记中的绑定时，SelectionModel在内部检查对象身份。将在内部选定对象集中查找“行”指向的对象。

与SelectionModel源代码的第99-101行和第16行进行比较：

isSelected(value: T): boolean {
  return this._selection.has(value);
}

和

private _selection = new Set<T>();