时间戳

首页 > 解决方案 > 也注入数据时，材料底部表组件中的异步数据不可用

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

问题描述

当我通过材料底部表[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' },
        });
    }
}

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

活动分区.component.html

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

open()这里只渲染通过bottom sheet方法的config参数传入的标题。删除此配置选项并加载分区。

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

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

传递给底部工作表组件的数据和分区数组现在都呈现了。

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

标签： javascriptangulartypescriptangular-material

解决方案

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

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();
    });
}

推荐阅读