错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：

Posted 2023-02-22

【中文标题】错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：

【英文标题】：Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value:

【发布时间】：2020-01-07 17:42:39

【问题描述】：

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

ERROR '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;

【参考方案1】：

添加一个 setTimeout：

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

【讨论】：

不，setTimeout 不起作用，我在控制台再次遇到同样的错误。