ngFor 值（数字）的 Angular 2 摘要

Question

我有一种情况，我需要为每个team task 收集所有pt（数量）（团队任务是动态的并且来自数据库）。

TS：

tasks;
  getTeams(){
    this.db.list(`projects/${this.auth.userId}/${this.key}/teams`).snapshotChanges().pipe(
      map(changes =>
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
      )
    ).subscribe((data) => {
      console.log(data);
     this.tasks = data;
    }  )}

HTML：

  <div *ngFor="let t of tasks">
        <p *ngFor="let pt of objectValues(t.tasks)">{{pt.pt}}</p>
      </div>

我的 firebase 数据库照片中两个 ngFors 的解释：

输出：

我希望每个TEAM 的输出只是所有pt 的摘要，如何实现？

例如：

正面：10pt (5 + 5)

Backas : 5pt (5)

添加console.log(data)的控制台日志：

Answer 1

如果我理解正确，你想总结每个任务的分数。您可以使用 Array.reduce 来计算：

脚本

getTeamPoints(team) {
  return Object.values(team.tasks).reduce((total, task) => total + parseInt(task.pt), 0);
}

注意：上面的脚本可能应该有它的变量类型。

查看

<div *ngFor="let team of teams">
  {{team.name}}: {{getTeamPoints(team)}} points
</div>