还注入数据时，材料底部表组件中的异步数据不可用

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' },
        });
    }
}

团队.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']);
  }
}

active-divisions.component.html

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

此处，仅open()呈现通过底部表单方法的 config 参数传入的标题。删除此配置选项并加载分区。

但是 - 在 active-divisions.component 中对 Divisions 数组进行硬编码，而不是从服务中获取它：

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

传递给底部工作表组件的数据和除法数组现在都呈现。

对于此示例，我显然可以将标题放在 active-divisions 组件中，但实际上我将传递所选团队的当前分区，以便它可以预填充底部工作表。

Answer 1

您需要触发更改检测来更新工作表：

import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';

constructor(private changeDetectorRef: ChangeDetectorRef) { }

ngOnInit() {
    this.yourService.getData().subscribe(data => {
        // do your stuff and notify of changes like this
        this.changeDetectorRef.detectChanges();
    });
}