Как реализовать динамические столбцы с MatGridList?

Question

У меня есть Mat-Grid-List, который отображает массив данных. Я хочу, чтобы свойство cols было динамическим. Количество cols зависит от с моей коробкой. Я поместил свой код в stackblitz . Он также должен пересчитать столбцы при изменении размера окна. В этот момент выдается следующая ошибка, и функция вызывается только один раз:

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после проверки. Предыдущее значение: «cols: 2». Текущее значение: 'cols: 6'.

Answer 1

Вам вообще не нужно использовать сеттер ViewChild. Просто создайте простую функцию с именем setColumns, которая обновляет columns в HTML. Используйте событие window:resize в HTML для вызова этой функции, а также вызовите ее в ngOnInit, чтобы изменить ее размер при загрузке.

@ViewChild('box', {static: true}) box: ElementRef;

ngOnInit() {
    this.setColumns();
}

setColumns() {
    this.columns = Math.floor(this.box.nativeElement.clientWidth / 100);
}

В шаблоне просто вызовите setColumns для window:resize.

<mat-grid-list [cols]="columns" (window:resize)="setColumns()" rowHeight="100px" width="100%">

Вот рабочий пример для StackBlitz .

Answer 2

Добавить resize событие в сетку, так как событие изменения размера не запускается

  <mat-grid-list [cols]="columns" rowHeight="100px" width="100%" (window:resize)="onBoxResize($event)">

demo