Jhipster：數據加載可能太慢

Question

使圖表無法正常工作。 我正在使用ng2-charts創建圖表。 我使用服務加載數據，然后將它們顯示在圖表中。 問題是，只有在我從服務中獲取數據的那一刻到設置圖表數據的那一刻之間添加了alert（），數據才能正確顯示。

lightData: LightData[];
public lineChartData = Array<any>();
public lineChartLabels = Array<any>();

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas
    this.setChartData() // Set datas of my chart
}

loadAll() {
    this.lightDataService.query().subscribe(
        (res: Response) => this.onSuccess(res.json(), res.headers),
        (res: Response) => this.onError(res.json())
    );
}

public setChartData(){
    for(let i =0; i< this.lightData.length; i++)
    {
        this.lineChartLabels.push(this.lightData[i].id);
        this.lineChartData.push(this.lightData[i].value);
    }
}

private onSuccess(data, headers) {
    for (let i = 0; i < data.length; i++) {
        this.lightData.push(data[i]);
    }
}

private onError(error) {
    this.alertService.error(error.message, null, null);
}

此代碼不起作用，圖表為空，但是，如果我添加這樣的警報：

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas
    alert("blabla"); // alert to wait
    this.setChartData() // Set datas of my chart
}

有用 ！

我以前在其他功能上已經遇到過這個問題，但我不知道如何解決。

編輯1：嘗試將setChartData調用放入裝入所有異步方法中：

lightData: LightData[];
public lineChartData = Array<any>();
public lineChartLabels = Array<any>();

ngOnInit() {
    this.lightData = []; // Array is empty
    this.loadAll(); // Load all the datas

}

loadAll() {
   this.lightDataService.query().subscribe(
   (res: Response) => {
      this.onSuccess(res.json(), res.headers);
      this.setChartData();
      },
   (res: Response) => this.onError(res.json())
   );
 }

public setChartData(){
  for(let i =0; i< this.lightData.length; i++)
  {
    this.lineChartLabels.push(this.lightData[i].id);
    this.lineChartData.push(this.lightData[i].value);
  }
}

private onSuccess(data, headers) {
    for (let i = 0; i < data.length; i++) {
        this.lightData.push(data[i]);
    }
}
private onError(error) {
    this.alertService.error(error.message, null, null);
}

還是行不通。

Answer 1

數據的加載是異步完成的，您的代碼不會停止並等待直到加載它。 現在您執行事務的方式是執行的順序。

 this.loadAll(); // starts the request
 this.setChartData(); // set the empty list as data
 this.onSuccess(res.json(), res.headers); // later the request finishes

您需要做的是在收到數據后設置圖表數據。 您可以通過在請求的成功處理程序中調用setChartData來實現。

loadAll() {
  this.lightDataService.query().subscribe(
    (res: Response) => {
      this.onSuccess(res.json(), res.headers);
      this.setChartData();
    },
    (res: Response) => this.onError(res.json())
  );
}