ExpressionChangedAfterItHasBeenCheckedError при передаче ширины элемента моей собственной директиве.

Question

Я создал свою собственную директиву для заголовка таблицы (тегthead). Это делает этот заголовок таблицы "липким" (имеет фиксированное положение и виден во время таблицы прокрутки). Это выглядит так:

sticky.directive.ts

const NAVBAR_HEIGHT = 55;

@Directive({
    selector: '[sticky]',
})
export class StickyDirective implements AfterViewInit {

    @Input()
    @HostBinding('style.width.px')
    stickyWidth: string;

    topPosition: number;

    constructor(private _element: ElementRef, private _window: WindowRef) { }

    ngAfterViewInit() {
        let boundingClientRect = this._element.nativeElement.getBoundingClientRect();
        this.topPosition = boundingClientRect.top - NAVBAR_HEIGHT;
    }

    @HostListener('window:scroll', ['$event'])
    handleScrollEvent(e) {
        if (this._window.nativeWindow.pageYOffset > (this.topPosition) ) {
            this._element.nativeElement.classList.add('stick');
        } else {
            this._element.nativeElement.classList.remove('stick');
        }
    }
} 

И называется так:

<div class="card-block" >
   <table #table class="table table-bordered">
      <thead sticky [stickyWidth]="table.offsetWidth">

Это нормально работает, но в консоли я получил ошибку:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '1632'. Current value: '1615'.
    at viewDebugError (core.es5.js:8633)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8611)
    at checkBindingNoChanges (core.es5.js:8775)
    at checkNoChangesNodeInline (core.es5.js:12329)
    at checkNoChangesNode (core.es5.js:12303)
    at debugCheckNoChangesNode (core.es5.js:12922)
    at debugCheckDirectivesFn (core.es5.js:12824)
    at Object.View_PageListComponent_0.co [as updateDirectives] (PageListComponent.html:23)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12806)
    at checkNoChangesView (core.es5.js:12123)
    at callViewAction (core.es5.js:12487)

---

Кто-нибудь может объяснить мне, что я сделал не так? Как я могу защитить свое приложение от этого исключения или как правильно создать похожую директиву? заранее спасибо

Answer 1

В тот момент, когда вы обновляете table.offsetWidth происходит после того, как Angular закончил это changeDetection цикл

Было бы лучше поделиться кодом, но не видя его, вот что вам, вероятно, нужно сделать:

• Перенесите это обновление в более точные и правильные сроки и убедитесь, что процесс его изменения является односторонним.

• использование detectorRef.detectChanges() после вашего обновления

• Поместите обновление в setTimeout

Любой из них сработает, но лучший - первый, остальные - ваше последнее средство