angular 2 如何对列 ngFor 求和

Question

试图了解如何对表中的列求和，每个列都添加了 *ngFor(如待办事项列表)，我想对其中一列求和，如何在 Angular 2 中进行求和？所以我有这样的表:

<tr *ngFor="let item of items">
    <td>{{item.num1 }}</td>
    <td>{{item.num2}}</td>
    <td>{{item.num3}}</td>
    <td>{{item.num4}}</td>
    <td>{{item.num5}}</td>
</tr>

我需要总结下面的所有列:

<tr *ngFor="let item of items">
     <td>{{item.num1 }}</td>
     <td>{{item.num2}}</td>
     <td>{{item.num3}}</td>
     <td>{{item.num4}}</td>
     <td>{{item.num5}}</td>
</tr>
<tr>
     <td>SUM1</td>
     <td>SUM2</td>
     <td>SUM3</td>
     <td>SUM4</td>
     <td>SUM5</td>
</tr>

Answer 1

您必须在 Angular 2 Component 类中创建一个 getSum(index: number): number 方法，如下所示:

getSum(index: number) : number {
  let sum = 0;
  for(let i = 0; i < this.items.length; i++) {
    sum += this.items[i][index];
  }
  return sum;
}

在您的 html 中，将您的 SUMX 替换为:

<td>{{ getSum(0) }} </td><td>{{ getSum(1) }}</td> ...

如果需要，您当然也可以使用 ngFor 创建多个 td 标签。

[编辑]:根据您的 fiddle 获得您需要的确切代码:

  getSum(column) : number {
    let sum = 0;
    for(let i = 0; i < this.list.length; i++) {
      sum += this.list[i][column];
    }
    return sum;
  }

在 html 中:

<td>{{ getSum('newInput') }}</td><td>{{ getSum('newOutput') }}</td>

[编辑 2]:为了完整起见，您还可以使用 reduce 函数对数组求和，而不是在 getSum 方法中使用循环:

var sum = this.items[i]['myfield'].reduce(function(x, y) { return x + y; }, 0);