錯誤：ExpressionChangedAfterItHasBeenCheckedError - 角

Question

我有一個數據我循環機智*ngFor數組。我只想檢查一個值是低於還是高於0，所以我做了一個checkPositive函數。下面是HTML代碼：

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

結果我得到的是第一個數字沒有顏色設置。

和控制檯返回

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'">