Fehler: ExpressionChangedAfterItHasBeenCheckedError - Angular

Question

Ich habe ein Array von Daten I Schleife wit *ngFor. Ich möchte nur überprüfen, ob ein Wert unter oder über 0 ist, also habe ich eine CheckPositive-Funktion gemacht. Hier ist der HTML-Code:

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

und die TS-Datei

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

Das Ergebnis, das ich bekommen ist, dass die erste Zahl keine Farbe gesetzt hat.

und die Konsole kehrt

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

Ich verstehe, was das Problem ist, ich weiß nur nicht, wie es zu lösen.

Answer 1

Das Problem besteht darin, dass Sie dieselbe Komponenteneigenschaft für alle Einträge in Ihrer Liste verwenden.

Probieren Sie diese

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

oder

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