ngFor для итерации массива объектов и подсчета длины свойства массива

Question

Я делаю веб-приложение на Angular 6. Я получаю массив объектов от 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>

чтение свойства 'программа' из неопределенного, чтение свойства 'события' изundefined

Я пытался:

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

Моя цель - показать длину program и events.

Answer 1

Вы перебираете массив 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>

Answer 2

Измените ваши определения для непосредственного определения строковых массивов:

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