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); 
} 
}

到目前为止，我很困扰这个问题。对于任何建议都会非常感激。

来源

2017-08-25 Yuri Zolotarev

而不是使用isPosOpen（状态），为什么不使用setStatus的（item.exitPrice ）==='打开'？ – jlareau

我会建议阅读这个答案，你会得到关于这个问题的一些提示https://stackoverflow.com/questions/45467881/expressionchangedafterithasbeencheckederror-expression-has-changed-after-it-was – JEMI

我认为发生错误是因为你参考该模板属性（'[class.openPos]'）的方法的模板（'td'），这也发生在我上周 – samAlvin

看起来像你得到这个错误，因为你传递的是由角度创建的DOM node，并且由于它的创建角尝试调用该方法来应用该类。这导致了双倍变化在开发模式下的不同结果。

你可以只实现你isPosOpen开放的方法是这样的：

isPosOpen(item: any) { 
    return item && item.exitPrice === 0; 
}

而且使用这样的：

[class.openPos]="isPosOpen(item)"

来源

2017-08-25 14:40:55 cyrix

谢谢，我忘了你可以传递一个项目在方法paramaeters中，我试图像这样{{itme.exitPrice}}传递它，并且出现错误，但只要我读到您的答案，就会很清楚地知道这是DOM变化检测算法，它正在纠正这种情况我刚刚通过[class.openPos] =“isPosOpen（item）”，现在我可以随心所欲地做任何事情。谢谢。 –

Angular ngFor类绑定ExpressionChangedAfterItHasBeenCheckedError

回答

相关问题