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

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

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

视图中的初始数据：

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

图表不会用数据初始化（屏幕1），只有在窗口大小调整数据进入图表屏幕2）后才会初始化。 如何修复它

屏幕1

屏幕2

---

谢谢您的组件。请声明一个标志

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>

---

这可能会起作用。您也可以使用async pipe处理相同的数据

演示如何在视图中使用此数据这是什么意思

图表不会用数据初始化（屏幕1），只有在图表屏幕2中显示窗口大小数据后才会初始化）

在

ngAfterViewInit中获取数据

    <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>