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

【问题标题】：Async data not available in material bottom sheet component when also injecting data也注入数据时，材料底部表组件中的异步数据不可用
【发布时间】：2019-04-05 13:39:58
【问题描述】：

当我通过材料底部表[open][1] 方法中的可选配置对象传递自定义数据时，我的组件数据 - 如果异步加载，则不可用/不呈现。如果我对组件数据进行硬编码或不将配置对象传递给 open 函数，则会加载组件数据。

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

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: Division[] = [
    {id: 1, name: 'Pool A'},
    {id: 2, name: 'Pool B'}
  ];

现在将数据传递到底部工作表组件和分区数组。

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

【问题讨论】：

标签： javascript angular typescript angular-material

【解决方案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();
    });
}

【讨论】：