当数组中的元素发生更改时,模板不会更新

时间:2017-09-29 13:05:36

标签: javascript arrays angular

我的模板中有一个有趣的设置,它使用数组中的值来计算和显示数字

{{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处理阵列变化检测的方式,我还不了解某些警告吗?

修改

此外,当我将单个对象属性输出到页面时,我看到它们的数字发生了变化,它只是通过未更新的管道传递的数字

0 个答案:

没有答案