angular - ngFor迭代对象数组并计算数组属性的长度

我正在Angular 6中做一个Web应用程序。我从Firebase接收到一系列对象，并试图使用ngFor向用户显示详细信息。我的对象数组是这样的：

export interface Competition {
  createdAt: Date;
  sessions: Session[];
}

export interface Session {
  date: Date;
  program: Program[];
  events: Event[];
}

export interface Program {
  name: string;
}

export interface Event {
  name: string;
}

在模板中，我正在做：

<ng-container *ngFor="let competition of competitions; index as i">
   <h3>{{competition.name}}</h3>
   {{competition.sessions[i].program.length}}
   {{competition.sessions[i].events.length}}
</ng-container>

读取未定义的属性“程序”，读取以下属性的“事件”
未定义


我努力了：

{{competition[i].sessions[i].program.length}}
{{competition.sessions[i].program.length}}
{{competition[i].sessions[i].program[i].length}}

我的目标是显示program和events的长度。

最佳答案

您遍历competitions数组，但尝试获取competition.sessions[i]。
您需要这样的东西：

<ng-container *ngFor="let competition of competitions; index as i">
   <h3>{{competition.name}}</h3>
   <div *ngFor="let session of competition.sessions">
      {{session.program.length}}
      {{session.events.length}}
   </div>
</ng-container>

如果要获取比赛的总时段和赛事总数，则应将其计入ts文件中

this.competitionResults = this.competitions
   .map(competition => competition.sessions
       .reduce((res, session) =>
           ({
                programLength: res.programLength + session.program.length,
                eventLength: res.eventLength + session.events.length,
           }), {
                programLength: 0,
                eventLength: 0,
           }))
   )

和HTML：

<ng-container *ngFor="let competitionResult of competitionResults">
   {{ competitionResult.programLength }}
   {{ competitionResult.eventLength}}
</ng-container>

关于angular - ngFor迭代对象数组并计算数组属性的长度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54770488/