Как добавить начальный выбор для угловой модели выбора материалаМодель?

Question

Документация Angular Material дает хороший пример того, как добавить выделение в таблицу ( Документы выбора таблицы ). Они даже предоставляют Stackblitz , чтобы попробовать его.

Я обнаружил в коде для конструктора SelectionModel , что первый аргумент заключается в том, можно ли сделать несколько выборок (true) или нет (false). Второй аргумент - это массив изначально выбранных значений.

В демонстрационной версии они не имеют изначально выбранных значений, поэтому вторым аргументом в конструкторе (строка 36) является пустой массив ([]).

Я хочу изменить его, чтобы изначально было выбрано значение, поэтому я изменил строку 36 на:

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

Это меняет флажок в заголовке на неопределенное состояние (как и ожидалось), но не приводит к выбору строки в таблице. Я неправильно устанавливаю начальное значение или чего мне здесь не хватает? Как установить изначально выбранное значение?

Answer 1

Если вы выполните следующее, оно тоже будет работать

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

Чтобы выбрать все, что вы можете сделать

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

Надеюсь, ответ полезен

Answer 2

Хитрый. Вам нужно инициализировать выделение путем извлечения этого конкретного объекта PeriodicElement из вашего ввода данных dataSource и передачи it в конструктор.

В этом конкретном случае вы могли бы кодировать

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 внутренне проверяет идентичность объекта. Он будет искать объект, на который указывает «строка» во внутреннем наборе выбранных объектов.

Сравните со строками 99-101 и 16 из SelectionModel исходный код:

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

и

private _selection = new Set<T>();