2016-12-19 2 views
1

jsonオブジェクトの合計値を、オブジェクトの名前値でフィルタするパイプフィルタを適用した後に表示します。これまでは、.jsonオブジェクトの名前の値で数値をフィルタリングできますが、パイプ内の.reduce()メソッドを使用してその合計を見つけて表示することはできません。パイプでフィルタリングした後のngForでデータアウトの合計を表示します。(Angular2)

パイプで名前の値でフィルタリングされた合計金額を表示するにはどうすればよいですか?

最終的には、都市を検索して、同じ都市名で識別できる各オブジェクトの数値の合計を確認したいと思います。
(私はこのチュートリアル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}); 
    } 
} 

答えて

0

私はあなたができるとは思いません。 xourコンポーネントまたはサービス内のデータをフィルタリングし、そのフィールドにバインドされたngForのフィールドにフィルタリングされたredultを割り当てます。フィルタリングされたデータから合計を計算し、それをフィールドに割り当て、ビューをそのフィールドにバインドします。

関連する問題