Error：ExpressionChangedAfterItHasBeenCheckedError - Angular

Question

私はループのウィット*ngForの配列を持っています。値が0以下かどうかを確認したいので、checkPositive関数を作成しました。

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

をTsは私が得る結果は、最初の数字は何色が設定されていないということです

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

ファイル：ここではHTMLコードです。

とコンソールが

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

を返し、私は問題が何であるかを理解し、私はちょうどそれを解決する方法がわかりません。

Answer 1

問題は、リスト内のすべてのエントリに対して同じコンポーネントプロパティを使用していることです。

だけでやろうこの

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

または

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