Angular7 *ngIf 在带有 isLoading 的应用程序组件中 |来自 redux store 的异步管道抛出 "ExpressionChangedAfterItHasBeenCheckedError"

Question

我有一个不确定的微调器，我在 app.component.html 中使用 *ngIf（始终加载），它正在查看我的 redux 存储中的一个变量，我将其引入 app.component.ts @select() isLoading; 使用 | async 管道。

问题是，由于某些奇怪的原因，随着我的应用程序的增长，它完全停止工作并抛出此错误：

ERROR Error: "ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous value: 'ngIf: [object Object]'. 
Current value: 'ngIf: true'."

我更改该变量的方式是在不同的地方注入我的通知服务，然后调用 notification.loading(). 函数

现在，在该函数内部是第一个位置，我在其中分派操作以将该变量设置为 true/false（由于一次加载多个内容而未切换它）。

Answer 1

我最终绕过了 *ngIf，所以我不再将 it/adding 删除到 DOM 中。

相反，我在 app.component.html 中的微调器 html 标记上使用 [ngClass] 绑定到控制器中的属性，在那里我应用了 .hiddenSpinner 基于redux 存储中 isLoading 布尔值发出的值：

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

在 style.css 我所做的是：

.hiddenSpinner { display: none!important }

Angular7 *ngIf 在带有 isLoading 的应用程序组件中 |来自 redux store 的异步管道抛出 "ExpressionChangedAfterItHasBeenCheckedError"

Angular7 *ngIf in app component with isLoading | async pipe from redux store throws "ExpressionChangedAfterItHasBeenCheckedError"

angular

angular-pipe

angular-ng-if

angular7