錯誤：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'">