离子如何循环和计算从*ngFor的值

Question

我从我使用 Django Framework 创建的 API 中获取一系列数据，并使用 *ngFor 将其循环到我的离子中

下面是代码示例：

      <ion-item *ngFor="let user of users">
        <ion-row>
          <ion-col col-4>
            {{user.fields.date}}
          </ion-col>
          <ion-col col-4>
                {{user.fields.duration}}
          </ion-col>

我

想知道的是，我有任何想法可以计算 ts 文件或 html 中 {{user.fields.duration}} 的总和???

我是离子的新手，我不知道该怎么做。请帮助我，谢谢!!

Answer 1

使用函数来执行此操作。

sumOf(field: string, array: number[]) {
  return array.reduce((p, n) => {
    p[field] += n[field];
    return p;
  }, 0);
}

在您的 HTML 中：

{{ sumOf('duration', user.fields) }}

该函数将从零值开始，然后迭代数组的所有项目(给定字段(，将其添加到原始数字，然后返回它。

Answer 2

您可以为总和创建角度管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'sum'
})
export class SumPipe implements PipeTransform {
    transform(items: any[], attr: string): any {
        return items.reduce((a, b) => a + b[attr], 0);
    }
}

并这样称呼它：

<span>{{ user.fields| sum:'duration' }}</span>