javascript - 我将如何迭代计数字段并合计它们并通过 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
  }
]

这就是我在我的 View 中将它们打印到屏幕上的方式:

<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/