Question

我希望在应用管道过滤器之后显示我的json对象中的金额值，并按对象过滤它们。名称值。到目前为止，我可以通过.json对象的名称值来过滤数字，但是我无法在管道中找到并显示带有.reduce（）方法的总和。

如何显示管道按名称值过滤的总金额总和？

最终，我希望用户搜索某个城市，并查看每个对象的数字值的总和，该值可以通过相同的城市名称识别。
（我正在构建本教程https://www.youtube.com/watch?v=sVTNaYBVP88&list=PL4cUxeGkcC9jqhk5RvBiEwHMKSUXPyng0&index=22）

json样本

[
{
"name": "Bacon",
"belt": "purple",
"amount": 23
},
{
"name": "Alex",
"belt": "purple",
"amount": 24
},
{
"name": "Alex",
"belt": "black",
"amount": 232
}
]

组件HTML

<li *ngFor="let ninja of ninjas | filter:term | sum" >
<p>{{ninja.amount}}</p>
</li>

总和管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sum'
})
export class SumPipe implements PipeTransform {

  transform(ninjas: any, term: any): any {

  return ninjas.reduce(function(a,b){return a + b});
  }
}

Answer 1

我认为你不能。过滤xour组件或服务中的数据，并将过滤后的redult分配给该字段绑定ngFor的字段。计算过滤后数据的总和，并将其分配给一个字段，并将视图绑定到该fielf。

在通过管道过滤后以ngFor显示数据输出的总和（Angular2）

1 个答案: