如何在加载数据后初始化元素？

Question

我有一个服务类，它通过http以几种方法加载数据。例如：

filesPerWeek(login: string): Observable<FilesLastActivity[]> {
    return this.http.get('api/report/user_files_by_week?userId=' +  login)
        .map((res: Response) => res.json());
}

在componenent.ts中，我在ngOnInit生命周期钩子中获取此数据。

this.dashboardService.filesPerWeek(this.currentAccount.login).subscribe(data => {
        data.forEach(el => {
          this.barChartLabels.push(new Date(el.week).toDateString());
          this.barChartData[0].data.push(el.files);

        })

视图中的初始化数据：

<canvas
        baseChart class="chart"
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        [colors]="barChartColors"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>

只有在窗口调整大小数据出现在图表 screen2）之后，图表才会初始化数据（screen1）。 怎么解决？

屏蔽1

画面2

由于

Answer 1

在你的component.ts中声明一个标志

private isDataAvailable:boolean=false;

在subscribe方法的模板中，当数据到达时将此标志设为true

this.dashboardService.filesPerWeek(this.currentAccount.login).subscribe(data => {
    data.forEach(el => {
      this.barChartLabels.push(new Date(el.week).toDateString());
      this.barChartData[0].data.push(el.files);
      this.isDataAvailable=true;

    })

并在您的模板中使用ngIf

    <div *ngIf="isDataAvailable">
    <canvas
    baseChart class="chart"
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [chartType]="barChartType"
    [colors]="barChartColors"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)"></canvas>

   </div>

这应该可行。您也可以使用异步管道来实现相同的