Как сделать свойство столбцов Mat-Grid-List динамическим?

Question

Мне нужен Mat-Grid-List, в котором я могу динамически изменять количество свойства "cols", определяемого по ширине поля, следующим образом:

<mat-grid-list [cols]="getAttachmentColumns()" rowHeight="100px" style="width: 100%;">
  <mat-grid-tile *ngFor="let attachment of attachments; let i = index">
    ...
  </mat-grid-tile>
</mat-grid-list>

@ViewChild('attachments', {static: false}) attachments: ElementRef;
getAttachmentColumns(): number {
  if(this.attachments) {
    let n = Math.floor(this.attachments.nativeElement.clientWidth / 100);
    return (n > 0 ? n : 1);
  } else {
    return 1;
  }
}

С этим кодом Iвсегда выдается следующее предупреждение / ошибка:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'cols: 1'. Current value: 'cols: 5'.
    at viewDebugError (core.js:25491)
    at expressionChangedAfterItHasBeenCheckedError (core.js:25468)
    at checkBindingNoChanges (core.js:25772)
    at checkNoChangesNodeInline (core.js:38548)
    at checkNoChangesNode (core.js:38521)
    at debugCheckNoChangesNode (core.js:39482)
    at debugCheckDirectivesFn (core.js:39379)
    at Object.eval [as updateDirectives] (TicketDetailControlComponent.html:296)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkNoChangesView (core.js:38354)

Answer 1

первый импорт ChangeDetectorRef:

import { ChangeDetectorRef } from '@angular/core';

Затем реализуйте функцию ngAfterViewChecked, как показано ниже.

constructor(private changeDetectorRef : ChangeDetectorRef){}

ngAfterViewChecked(){
  this.changeDetectorRef.detectChanges();
}

Это работа для меня.