错误：ExpressionChangedAfterItHasBeenCheckedError - 角

我有一个数据我循环机智*ngFor数组。我只想检查一个值是低于还是高于0，所以我做了一个checkPositive函数。下面是HTML代码：错误：ExpressionChangedAfterItHasBeenCheckedError - 角

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

我的理解是什么问题，我只是不知道如何解决它。

来源

2017-10-04 Azoulay Jason

你能在plunker提供再现？ – yurzui

它实际上很复杂，因为我通过数据循环，但一切都在这里 –

这里的主要问题是你的checkPositive方法是在ngStyle绑定应用后执行的，在checkPositive方法内部有副作用。 https://angular.io/guide/template-syntax#no-visible-side-effects – yurzui

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

只是尝试这样做

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

来源

2017-10-04 10:29:06

错误：ExpressionChangedAfterItHasBeenCheckedError - 角

回答

相关问题