Question

当我通过底材[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'}
  ];

然后，所有传递到底部工作表组件的数据和除法数组都将呈现。

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

Answer 1

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

SELECT COUNT(*) as total 
from license_csv WHERE 
lic_state like '%ca%' AND lic_city LIKE '%fresno%'

同时注入数据时，材料底片组件中不存在异步数据

1 个答案: