Angular errornames error Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после проверки

Question

У меня есть следующий стандартный код angular и я хочу увидеть классы, которые применяются, когда пользователь

   <div class="form-group">
      <label for="loginId">Login Id</label>
      <input
        type="text"
        id="loginId"
        [(ngModel)]="model.loginId"
        name="loginId"
        required
        #loginIdInput
      />
      className: {{ loginIdInput.className }}
    </div>

Однако я получаю следующую ошибку в консоли

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: 'ng-untouched ng-pristine ng-valid'.

Почему это происходит, это стандарт?

Answer 1

Если вы установили начальное значение для вашего ChildComponent и если вы пытались изменить это значение для вашего ParentComponent с помощью ngAfterViewInit, обязательно добавьте ChangeDetectorRef, чтобы обнаружить пример изменений:

constructor(private cdr: ChangeDetectorRef) {}       // Imported at @angular/core

ngAfterViewInit(): void {
  ...
  this.cdr.detectChanges();
}