Angular 8: получение ошибки в консоли ExpressionChangedAfterItHasBeenCheckedError при использовании * ngIf

Question

У меня есть 2 компонента внутри обертки, и обертка имеет фиксированную высоту.ToggleComponent имеет свойство css высоты, привязанное к полю высоты, и кнопку, которая меняет поле высоты.TestComponent берет остальную часть высоты.У него есть атрибут test, связанный с его clientHeight.Основное внимание уделяется привязке DOM к чему-то, что из-за привязки будет отличаться от других компонентов, поэтому я использую clientHeight.Если в TestComponent имеется директива * ngIf, при изменении значения ToggleComponent.height происходит ExpressionChangedAfterItHasBeenCheckedError.

Ошибка:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'test: 200'. Current value: 'test: 100'.
    at viewDebugError (core.js:20440)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20428)
    at checkBindingNoChanges (core.js:20530)
    at checkNoChangesNodeInline (core.js:23403)
    at checkNoChangesNode (core.js:23390)
    at debugCheckNoChangesNode (core.js:23994)
    at debugCheckDirectivesFn (core.js:23922)
    at Object.eval [as updateDirectives] (testChild.html:2)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkNoChangesView (core.js:23289)

Answer 1

Попробуйте добавить такой код:

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

Ваш класс должен реализовать OnAfterViewChecked

constructor(private cdRef:ChangeDetectorRef) {}

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

Но для лучшего ответа покажите свой код.