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

Question

Angular Material 文档提供了一个很好的示例，说明如何将选择添加到表格 (Table Selection docs)。他们甚至提供了 Stackblitz试试看。

我在 code for the SelectionModel constructor 中找到了第一个论点是是否可以进行多项选择(真)或不(假)。第二个参数是最初选择的值的数组。

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

我想更改它以便有一个最初选择的值，所以我将第 36 行更改为:

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

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

Answer 1

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

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

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

这是因为 SelectionModel 检查事件选择的方式。

在您的表格标记中，您有

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

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

"row"指向来自实际 MatTableDataSource 输入的对象:

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

但是选择初始化:

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

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

当 Angular 评估标记中的绑定(bind)时，SelectionModel 会在内部检查对象身份。它将在选定对象的内部集合中查找“行”指向的对象。

比较 SelectionModel 中的第 99-101 行和第 16 行源代码:

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

和

private _selection = new Set<T>();