Error: ExpressionChangedAfterItHasBeenCheckedError - Angular

Question

I have an array of data I loop wit *ngFor. I just want to check if a value is under or above 0, so I've made a checkPositive function. Here's the HTML code :

<div class="col-xs-4" [ngStyle]="{'color':color}"> <span>{{checkPositive(contract.transactionAmount) | number: '1.2-2'}} {{contract.contractCurrency}}</span> </div>

And the ts file

checkPositive(amount){ if(amount > 0){ this.color="blue"; return amount; } else{ this.color="red"; return amount; } }

The result I get is that the first number has no color set.

and the console returns

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'blue'.

I understand what the problem is, I just don't know how to solve it.

It is actually complicated because i loop through data, But everything is here — Azoulay Jason
– Azoulay Jason, Commented Oct 4, 2017 at 10:22
The main problem here is that your checkPositive method is executed after ngStyle binding has been applied and inside checkPositive method you have side effect. angular.io/guide/template-syntax#no-visible-side-effects — yurzui
– yurzui, Commented Oct 4, 2017 at 10:24
Sure, that's exactly what the problem is, however I can't seem to find a solution — Azoulay Jason
– Azoulay Jason, Commented Oct 4, 2017 at 10:26
[ngStyle]="{ color: contract.transactionAmount ? 'blue' : 'red' } and remove this.color inside checkPositive method — yurzui
– yurzui, Commented Oct 4, 2017 at 10:27

Yordan Nikolov · Accepted Answer · 2017-10-04 10:29:06Z

The problem is that you are using same component property for all the entry in your list.

Just try to do this

<div class="col-xs-4" [ngStyle]="{'color': contract.transactionAmount > 0 ? 'blue':'red'}"> <span>{{ contract.transactionAmount | number: '1.2-2'}} {{contract.contractCurrency}}</span> </div>

or

<div class="col-xs-4" [style.color]="contract.transactionAmount > 0 ? 'blue':'red'">

Collectives™ on Stack Overflow

Error: ExpressionChangedAfterItHasBeenCheckedError - Angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related