Angular ngFor类绑定ExpressionChangedAfterItHasBeenCheckedError
我有一个ngFor循环,通过我从服务器获取的对象。一切都很好,就像这样。Angular ngFor类绑定ExpressionChangedAfterItHasBeenCheckedError
<tr *ngFor="let item of clientPositions">
<td ">{{setStatus(item.exitPrice)}}</td>
</tr>
的零部件只是看起来如果有一个数来:
setStatus(exitPrice) : any{
if (exitPrice>0)
return "closed";
return "open";
}
很简单,如果有一个退出的价格,我认为位置被关闭,我回到关闭的状态。
无论如何,我想为关闭或打开的值添加颜色,所以我添加了这个。
<tr *ngFor="let item of clientPositions">
<td #status [class.openPos]="isPosOpen(status)"
{{setStatus(item.exitPrice)}}
</td>
</tr>
然后在组件简单Methis Hotel酒店返回true或false:
isPosOpen(status) {
let val = (status.innerText);
if (val==="open"){
return true;
}
return false;
}
在这里,我开始有问题...首先是这个错误:
ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了变化。之前的值:'false'。当前值:'true'。
我试着调试控制台中的isPosOpen(status)方法,它似乎循环被旋转了很多次。至少两次,我不知道为什么有角度做到这一点。这可能是错误发生的地方。数据接收OnInit是这样的:
ngOnInit() {
if (this.auth.isEmailVerified){
this.service.getPositions().
subscribe(positions => {
this.clientPositions=positions
});
}
else{
new NotVerifiedError(this.toast);
}
}
到目前为止,我很困扰这个问题。对于任何建议都会非常感激。
看起来像你得到这个错误,因为你传递的是由角度创建的DOM node
,并且由于它的创建角尝试调用该方法来应用该类。这导致了双倍变化在开发模式下的不同结果。
你可以只实现你isPosOpen
开放的方法是这样的:
isPosOpen(item: any) {
return item && item.exitPrice === 0;
}
而且使用这样的:
[class.openPos]="isPosOpen(item)"
谢谢,我忘了你可以传递一个项目在方法paramaeters中,我试图像这样{{itme.exitPrice}}传递它,并且出现错误,但只要我读到您的答案,就会很清楚地知道这是DOM变化检测算法,它正在纠正这种情况我刚刚通过[class.openPos] =“isPosOpen(item)”,现在我可以随心所欲地做任何事情。谢谢。 –
而不是使用isPosOpen(状态),为什么不使用setStatus的(item.exitPrice )==='打开'? – jlareau
我会建议阅读这个答案,你会得到关于这个问题的一些提示https://*.com/questions/45467881/expressionchangedafterithasbeencheckederror-expression-has-changed-after-it-was – JEMI
我认为发生错误是因为你参考该模板属性('[class.openPos]')的方法的模板('td'),这也发生在我上周 – samAlvin