Angular ширина привязки к ContentChildren

Question

Я пытаюсь создать компонент таблицы в Angular.

У меня есть демонстрация StackBlitz Здесь

Когда я пытаюсь привязать ширину <div> к моим компонентам столбца, я получаю ExpressionChangedAfterItHasBeenCheckedError

Есть ли лучший способ добиться этого?

Спасибо

Answer 1

Я обновил ваш Stackblitz с помощью частного cdr: ChangeDetectorRef в конструкторе, который теперь вызывает метод detectchChanges в хуке жизненного цикла ngOnInit. Тогда вы не получите никаких ошибок.

посмотреть: https://stackblitz.com/edit/angular-ivy-lvtprr?file=src / column / column.component.ts

Answer 2

Демо Stackblitz

Первый цикл обнаружения изменений происходит после OnInit. В этом случае angular запускает обнаружение изменений для обновления модели и вида. Затем он снова запускается в NgAfterViewInit и не ожидает каких-либо изменений в вашем шаблоне. Что меняется, так это ширина в вашем TableComponent. Вы можете избежать этого, если вам удастся отложить выполнение выражения, изменяющего ширину. Один из способов сделать это, который пришел ко мне, - использовать канал, который возвращает наблюдаемое, которое может задерживать выброс ширины для изменения свойства:

<div class="cell" [style.width.px]="column | offsetWidth | async">-</div>

Канал offsetWidth будет выглядеть следующим образом:

transform(column: ColumnComponent): Observable<string> {
    return of(1).pipe(
      delay(0), // <= this will delay the emision
      switchMap(_ => 
        of(column && column.elementRef.nativeElement.offsetWidth))
    );
  }