Асинхронные данные недоступны в компоненте нижнего листа материала при вводе данных

Question

Когда я передаю пользовательские данные с помощью необязательного объекта конфигурации в методе нижнего листа материала [open][1], данные моего компонента - если загружаются асинхронно, недоступны / не отображаются. Если я жестко закодировал данные компонента или не передал объект конфигурации в функцию open, данные компонента загружаются.

team.component.ts - содержит метод открытия нижнего листа

export class TeamsComponent implements OnInit {
  teams: Team[];
  constructor(
    private teamService: TeamService,
    private messageService: MessageService,
    private bottomSheet: MatBottomSheet
  ) { }

    showActiveDivisionsInBottomSheet() {
        const ref = this.bottomSheet.open(ActiveDivisionsComponent, {
          data: { heading: 'Switch to new division' },
        });
    }
}

teams.component.html

<ul>
  <li *ngFor="let team of teams">
    {{ team.name }}
    <button (click)="showActiveDivisionsInBottomSheet()" mat-raised-button>{{ team.division.name }}</button>
  </li>
</ul>

active-Divisions.component.ts - компонент, переданный на нижний лист материала

export class ActiveDivisionsComponent implements OnInit {
  divisions: Division[];
  constructor(
    @Inject(MAT_BOTTOM_SHEET_DATA) public data: any,
    private divisionsService: DivisionsService
  ) { }
  ngOnInit() {
    this.getDivisions();
  }
  getDivisions(): void {
    this.divisionsService.getDivisions()
      .subscribe(response => this.divisions = response['data']);
  }
}

активный-divisions.component.html

<h1>{{ data.heading }}</h1>
<ul>
  <li *ngFor="let division of divisions">
    {{ division.name }}
  </li>
</ul>

Здесь отображается только заголовок, переданный через параметр config метода open() нижнего листа. Удалите этот параметр конфигурации, и разделы будут загружены.

Однако - жестко закодируйте массив Divisions в active-Divisions.component, а не извлекайте его из службы:

divisions: Division[] = [
    {id: 1, name: 'Pool A'},
    {id: 2, name: 'Pool B'}
  ];

И теперь обрабатываются как данные, передаваемые нижнему компоненту листа, так и массив подразделений.

В этом примере я, очевидно, мог бы поместить заголовок в компонент активных подразделений, но в действительности я пропущу текущее разделение выбранной команды, чтобы он мог предварительно заполнить нижний лист.