我的模板中有一个有趣的设置,它使用数组中的值来计算和显示数字
{{moduleProps.totals | values | sum | currency:'USD':true:'1.0-0'}}
这是值管道
import { Pipe, PipeTransform } from '@angular/core';
import { values } from 'lodash';
@Pipe({
name: 'values',
})
export class ValuesPipe implements PipeTransform {
transform(value: any, ...args) {
if(value){
return values(value);
}
}
}
这是总和管道
import { Pipe, PipeTransform } from '@angular/core';
import { reduce } from 'lodash';
@Pipe({
name: 'sum',
})
export class SumPipe implements PipeTransform {
transform(value: any, ...args) {
if(value){
return reduce(value,(a,b)=>a+b,0);
}
}
}
我正在使用的数组看起来像这样......
[donation_earnings: 868, donation_pledges: 10, raffle_purchase_earnings: 4, fixed_purchase_earnings: 6, bid_earnings: 38]
当我尝试稍后更新这些数字时,就像这样......
this.moduleProps.totals.donation_pledges + = events [0] .amount;
events[0].amount
应该是一个数字,添加到该对象属性的当前数量。
但是,当我这样做时,模板不会更新。当我在进行数学运算后退出对象属性时,我看到数字已更改,但模板没有听到它。
我这样做后,我也在打电话
this.changeDetectorRef.detectChanges();
帮助对正在推送和弹出的另一个项目数组进行更改检测,但这似乎也没有获取对数组中值的更改。
我也尝试在NgZone.run()
中运行此功能,但也没有更新模板。
对于角度2处理阵列变化检测的方式,我还不了解某些警告吗?
修改
此外,当我将单个对象属性输出到页面时,我看到它们的数字发生了变化,它只是通过未更新的管道传递的数字