Angular7 + REDUX: Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

我已经检查了此处所有现有的线程并进行了大量额外的故障排除。这个问题已经困扰我几个星期了，不知道该怎么办。

我在 angular7 中有一个 redux 架构，我只是简单地调度操作来更改我的 redux 存储中的布尔值。

在我的 app.component.ts 中，我从 redux 商店订阅了那个 'promise' 并根据它的值更改了一个局部变量，我使用 ngClass 绑定到 HTML 元素，比如这个：

在 app.component.html 中的 HTML 标记中：

<mat-progress-bar class="loadingSpinner" 
[ngClass]="hiddenSpinner" mode="indeterminate"></mat-progress-bar>

在我的控制器中 app.component.ts:

  ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
    if(data == true){this.hiddenSpinner = "" } else { this.hiddenSpinner = "hiddenSpinner"}
    })}

我的 Redux 操作：

case START_LOADING: if(INITIAL_STATE.isLoading == false) 
{ return startLoading(state, action) } else { return };

但错误仍然存在！

这个错误让我 100% 确定这是因为那个特定的变量。

如果我只是关闭 html 元素，则不会显示错误。

Answer 1

ExpressionChangedAfterItHasBeenCheckedError 是非常不言自明的期望，这意味着在 Change Detector Cyclone 运行（主要在子组件中）时发生了一些变化。在你的情况下是 hiddenSpinner.

Option 1 : To fix this issue you can use setTimeout

 ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
   setTimeout(()=>{

    if(data == true){
        this.hiddenSpinner = "" 
    } else { 
         this.hiddenSpinner = "hiddenSpinner"}
      });
    })}

Option 2 : I would recommend to use this approach

 ngOnInit() {
  this.loadingSubscription = this.isLoading.subscribe(data => {
   Promise.resolve(null).then(()=>{

    if(data == true){
        this.hiddenSpinner = "" 
    } else { 
         this.hiddenSpinner = "hiddenSpinner"}
      });
 })}

Note : code is written in Whosebug editor directly so there could be typo or syntactical error. Please correct yourself.

Angular7 + REDUX: Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Angular7 + REDUX: Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

angular

angular7

angular-redux