角类名错误ERROR错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改

Question

我具有以下标准角度代码，并希望查看用户使用的类

   <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上设置了初始值，并且尝试通过ngAfterViewInit更改在ParentComponent上的初始值，请确保添加ChangeDetectorRef以检测您的更改示例：

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

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