3

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

我在 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 元素，则不会显示该错误。

4

1 回答 1

3

这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 编辑器中编写的，因此可能存在拼写错误或语法错误。请纠正自己。

于 2018-11-06T15:58:51.737 回答