Не определено при отображении данных подписки для вложенных классов

Question

Я работаю с Angular 8.

С помощью вложенного класса я пытаюсь отобразить данные, полученные в результате операции подписки, для наблюдаемой. Он работает для основных атрибутов класса (id, name), но я получаю «неопределенную» ошибку всякий раз, когда пытаюсь получить доступ к дочернему классу (Players), по крайней мере до тех пор, пока данные не будут окончательно переданы наблюдаемой.

Структура данных проста. У меня есть турнир с игроками.

import { Player } from './player';

export class Tournament {
   id: string;
   name: string;

   public Players: Player[];   
}

Служба заключается в следующем. Он возвращает данные правильно в формате, ожидаемом классом Tournament.

  getTournament(id): Observable<Tournament> {
    return this.http.get<Tournament>(this.apiURL + '/tournaments/' + id)    
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  } 

Компонент ниже. Он правильно инициализирует данные, пока я не пытаюсь получить доступ к дочернему компоненту, который, конечно, не определен, поскольку я объявил переменную tournament типа any

export class TournamentEditComponent implements OnInit {

  id = this.actRoute.snapshot.params['id'];
  tournament: any = [];

  constructor(public restApi: RestApiService, public actRoute: ActivatedRoute, public router: Router){}

  ngOnInit() { 
    this.getTournament();
  }

  // Get tournament data to feed screen
  getTournament() {
    this.restApi.getTournament(this.id).subscribe((data: any) => {
      this.tournament = data;
      console.log('Tournament:\n',this.tournament);
    })
  }

  <h4 class="mb-2">Players ({{tournament.Players.length}})</h4>
  <div class="row">
    <div class="col-md-12">
      <ngb-accordion #acc="ngbAccordion" activeIds="">
        <div *ngFor="let player of tournament.Players">
          <ngb-panel title="{{player.username}}">
            <ng-template ngbPanelContent>
              <p>{{player.name}} {{player.surname}}</p>
            </ng-template>
          </ngb-panel>
        </div>
      </ngb-accordion>
    </div>
  </div> 

Консоль, видимая в компоненте, показывает следующие данные (я удалил некоторые ненужные данные из нее):

{
  id: 1
  name: "Express1"
  prize: 1000
  rounds: 25
  createdAt: "2020-01-09T17:03:13.772Z"
  updatedAt: "2020-01-13T09:48:28.582Z"
  Players: Array(2)
    0: {id: 1, username: "aaaa", name: "a", surname: "b", email: "ab@mail.com"}
    1: {id: 3, username: "bbbb", name: "b", surname: "a", email: "ba@mail.com"}    
    length: 2
  __proto__: Array(0)
  __proto__: Object
}

Всякий раз, когда я пытаюсь получить доступ к объекту / классу Player со страницы HTML, я получаю неопределенная ошибка, даже если в конце она показывает данные правильно. Я попытался изменить переменную турнира компонента на переменную типа Tournament, но безуспешно.

Что я делаю не так? Как я мог, по крайней мере, инициализировать переменную Tournament, чтобы я не получил неопределенную ошибку при ожидании результата операции asyn c?

Answer 1

Может быть, вы можете попробовать это:

export class TournamentEditComponent implements OnInit {

  tournament$: Observable<any>;

  getTournament() {
    this.tournament$ = this.restApi.getTournament(this.id);
  }

<div *ngIf="(tournament$ | async)?.Players as players">
 <h4 class="mb-2">Players ({{ players.length }})</h4>
  <div class="row">
    <div class="col-md-12">
      <ngb-accordion #acc="ngbAccordion" activeIds="">
        <div *ngFor="let player of players">
          <ngb-panel title="{{ player.username }}">
            <ng-template ngbPanelContent>
              <p>{{ player.name }} {{ player.surname }}</p>
            </ng-template>
          </ngb-panel>
        </div>
      </ngb-accordion>
    </div>
  </div>
</div>