Angular ngFor类绑定ExpressionChangedAfterItHaHasBeenCheckedError

Question

I have an ngFor cycle which goes through an object I get from the server. Everything works well like this.

<tr *ngFor="let item of clientPositions"> 
    <td ">{{setStatus(item.exitPrice)}}</td>     
</tr>

The component part just looks if there is a number coming in:

setStatus(exitPrice) : any{

    if (exitPrice>0)
      return "closed";

      return "open";
}

Pretty simple, if there was an exit price I assume the position was closed and I return closed as status.

Anyway, I want to color up the closed or open values so I add this.

<tr *ngFor="let item of clientPositions"> 

      <td #status [class.openPos]="isPosOpen(status)"
              {{setStatus(item.exitPrice)}}
      </td>         
</tr>

And a simple methis in the component to return true or false:

isPosOpen(status) {

let val = (status.innerText);
if (val==="open"){
  return true;
}

return false;
}

Here I start having problems... First of all it is this error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

I tried debuggin the isPosOpen(status) method in the console and it seems the cycle is spinned numerous times. Twice at least and I have no idea why angular does that. Probably that is where the error occurs. The data is received OnInit like this:

ngOnInit() {

if (this.auth.isEmailVerified){
  this.service.getPositions().
  subscribe(positions => {
    this.clientPositions=positions

  });
}
else{
  new NotVerifiedError(this.toast);
}
}

So far I'm pretty stuck with this issue. Will be really gratefull for any suggestions.

Answer 1

It seems like your getting this error because you're passing in a DOM node which is created by angular and due to it's creation angular tries to invoke the method to apply the class. Which leads to a different outcome during double changeDetection in development mode.

You could just implement your isPosOpen open method like this:

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

And use it like this:

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