数値フィールドを繰り返し、角度2の文字列を補間して出力する方法

Question

角度2の* ngForと文字列補間を使用して、サブフィールドを繰り返し処理し、それらを "count"と共に表示します各サブフィールド。これは、データがDB上で次のようになります。

[ 
    { 
    "_id": { 
     "status": "gold", 
     "sub": "Category A" 
    }, 
    "count": 19 
    }, 
    { 
    "_id": { 
     "status": "gold", 
     "sub": "Category B" 
    }, 
    "count": 27 
    }, 
    { 
    "_id": { 
     "status": "gold", 
     "sub": "Category C" 
    }, 
    "count": 24 
    }, 
    { 
    "_id": { 
     "status": "", 
     "sub": "Category D" 
    }, 
    "count": 11 
    } 
] 

そして、これは私が私の見解では、画面にそれらを印刷しています方法です：

<ul class="action-list"> 
    <li *ngFor="let record of records" class="action">{{record._id.sub}}<span class="action-counts">{{record.count}}</span></li> 
</ul> 

そして、私のコンポーネントで、私はカウントサービスを呼び出しています次のようになります。

ngOnInit() { 
    this.streamGoldCountsService.getCount() 
     .subscribe(resRecordsData => this.records = resRecordsData, 
     responseRecordsError => this.errorMsg = responseRecordsError); 
} 

これまでのところすべてが期待通りに機能しています。

私の質問は、これらのさまざまなサブカウントを合計して、合計を画面に印刷する方法です。データベースにはサブカテゴリの合計がありませんので、私は自分のコンポーネントでいくつかの計算をする必要があります。しかし、私はこれを行うにはどのように最善のか分からない。思考？あなただけのレコードをの線に沿って何か反復処理することができます

Answer 1

：ここ

totalCounts(data) { 
    let total = 0; 

    data.forEach((d) => { 
     total += parseInt(d.count, 10); 
    }); 

    return total; 
    } 

はplunkerの例である：あなたが戻ってレコードを取得するとき https://embed.plnkr.co/IylOI2JMwCpGyhmgJCUq/