如何在Angular2中通過字符串插值遍歷計數字段和全部字段以及輸出

Question

我正在使用Angular 2的* ngFor和字符串插值來遍歷子字段並將它們與每個子字段的“計數”一起打印到屏幕上。 這是數據庫上數據的樣子：

[
  {
    "_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;
  }

這是一個小例子： https ://embed.plnkr.co/IylOI2JMwCpGyhmgJCUq/