如何在數據加載後初始化元素？

我有一個服務類，通過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

如何在數據加載後初始化元素？

回答

相關問題