gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:22:12 26 4
gpt4 key购买 nike

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

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

在我的 app.component.ts 中,我从 redux store 订阅了那个“promise”,并根据它的值更改了一个局部变量,我使用 ngClass 将其绑定(bind)到 HTML 元素,如下所示:

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

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

在我的 app.component.ts Controller 中:

  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 元素,错误就不会出现。

最佳答案

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 stackoverflow editor directly so there could be typo or syntactical error. Please correct yourself.

关于Angular7 + REDUX : Error: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53175232/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com