Question

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

我在angular7中有一个redux体系结构，我只是在派遣动作来更改redux存储区中的布尔值。

在我的app.component.ts中，我从redux商店订阅了该“承诺”，并根据其值更改了一个本地变量，该变量使用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。

选项1：要解决此问题，您可以使用setTimeout

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

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

选项2：我建议使用这种方法

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

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

注意：代码直接在stackoverflow编辑器中编写，因此可能存在拼写错误或语法错误。请纠正自己。

Angular7 + REDUX：错误：“ ExpressionChangedAfterItHasBeenCheckedError：在检查表达式后，表达式已更改

1 个答案: