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

我有一个服务类，通过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>

走势的不会初始化数据（屏幕截图1），窗口大小调整数据来自于图表屏蔽2）之后。如何解决它？

屏幕截图1

屏蔽2

感谢

来源

2017-08-09 GVArt

我们展示你如何使用这些数据视图 –

意思是这个'图表不会用数据初始化（屏幕1），只有在窗口调整大小数据进入图表屏幕2之后'' –

将数据存入'ngAfterViewInit' – Faisal

在你component.ts声明一个标志

private isDataAvailable:boolean=false;

而且在模板的订阅方法使这个标志真当数据到达时

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>

这也许应该work.You还可以使用异步管道为同一

来源

2017-08-09 13:58:46

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

回答

相关问题