[英]Angular7 + REDUX: Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
I've checked all existing threads on here and went through quite a bit of extra troubleshooting.我已经检查了此处的所有现有线程,并进行了大量额外的故障排除。 This issue has been plaguing me for a few weeks now and not sure what to do.
这个问题已经困扰我几个星期了,不知道该怎么办。
I have a redux architecture in angular7 and I'm simply dispatching actions to change a boolean in my redux store.我在 angular7 中有一个 redux 架构,我只是在调度操作来更改我的 redux 存储中的布尔值。
In my app.component.ts I subscribe to that 'promise' from the redux store and based on its value I change a local variable that I bind to the HTML element with ngClass, like this:在我的 app.component.ts 中,我从 redux 商店订阅了那个“承诺”,并根据它的值更改了一个本地变量,我使用 ngClass 绑定到 HTML 元素,如下所示:
In the HTML markup in app.component.html:在 app.component.html 的 HTML 标记中:
<mat-progress-bar class="loadingSpinner"
[ngClass]="hiddenSpinner" mode="indeterminate"></mat-progress-bar>
In my controller in app.component.ts:在我的 app.component.ts 控制器中:
ngOnInit() {
this.loadingSubscription = this.isLoading.subscribe(data => {
if(data == true){this.hiddenSpinner = "" } else { this.hiddenSpinner = "hiddenSpinner"}
})}
My Redux action:我的 Redux 操作:
case START_LOADING: if(INITIAL_STATE.isLoading == false)
{ return startLoading(state, action) } else { return };
Yet the error persists!然而错误依旧!
The error lets me know 100% sure that it's because of that specific variable.该错误让我 100% 确定这是因为该特定变量。
The error does not show up if I just turn that html element off.如果我只是关闭该 html 元素,则不会显示该错误。
The ExpressionChangedAfterItHasBeenCheckedError
is very self explanatory expectations which means something is changed while Change Detector Cyclone was running ( mostly in the child component ). ExpressionChangedAfterItHasBeenCheckedError
是非常不言自明的期望,这意味着在 Change Detector Cyclone 运行时(主要在子组件中)发生了一些变化。 In your case it is hiddenSpinner
.在您的情况下,它是
hiddenSpinner
。
Option 1 : To fix this issue you can use setTimeout
选项 1:要解决此问题,您可以使用 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
选项 2:我建议使用这种方法
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 stackoverflow editor directly so there could be typo or syntactical error.
注意:代码是直接在 stackoverflow 编辑器中编写的,因此可能存在拼写错误或语法错误。 Please correct yourself.
请自行纠正。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.