如何添加角材料表SelectionModel的初始选择？

Question

角材料文档为如何将选择添加到表(表格选择文档)提供了一个很好的示例。他们甚至提供了一个斯塔克布利茨来尝试它。

我在SelectionModel构造函数的代码中发现，第一个参数是是否可以有多个选择(真)(真)(假)。第二个参数是一个最初选定值的数组。

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

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

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

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

Answer 1

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

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

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

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

在表标记中

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

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

"row“指向实际MatTableDataSource输入中的对象：

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

但是选择初始化：

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

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

当角计算标记中的绑定时，SelectionModel内部检查对象标识。它将在所选对象的内部集合中查找"row“指向的对象。

与SelectionModel源代码中的第99-101和第16行相比：

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

和

private _selection = new Set<T>();

Answer 2

我也面临同样的问题，我使用dataSource在ngOnInit()中手动设置初始值。

ngOnInit() {
    this.dataSource.data.forEach(row => {
      if (row.symbol == "H") this.selection.select(row);
    });
  }

Answer 3

如果您执行以下操作，它也会工作。

selection = new SelectionModel<PeriodicElement>(true, [ELEMENT_DATA[1]])

选择您所能做的一切

selection = new SelectionModel<PeriodicElement>(true, [...ELEMENT_DATA])

我希望答案是有帮助的。