错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前值：

Question

如何避免出现此控制台错误。

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。以前的值：'bg-fade：false'。当前值：“ bg-fade：true”。

每当值更改遇到提到的错误时，我都会尝试根据真值向mat-sidenav-container添加一个类。

app.component.html

<mat-sidenav-container [ngClass]="{'bg-fade': showSpinner}">

app.component.ts

showSpinner: boolean;

constructor(private httpStatus: HTTPStatus) {
    this.httpStatus.getHttpStatus()
      .subscribe((status: boolean) => {
        this.showSpinner = status;
      });
  }

styles.css

.bg-fade {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

Answer 1

添加setTimeout：

setTimeout(() => {
    this.httpStatus.getHttpStatus().subscribe((status: boolean) => {
        this.showSpinner = status;
    });
}, 200);