错误:ExpressionChangedAfterItHasBeenCheckedError - Angular

时间:2017-10-04 10:14:38

标签: angular

我有一个数据数组我循环*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;
    }
  }

我得到的结果是第一个数字没有颜色设置。

enter image description here

,控制台返回

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

我明白问题是什么,我只是不知道如何解决它。

1 个答案:

答案 0 :(得分:2)

问题是您对列表中的所有条目使用相同的组件属性。

试着这样做

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