Question

我在制作图表时遇到了一些麻烦。我正在使用ng2-charts创建一个图表。我使用服务加载数据，然后将它们显示在图表中。问题是，只有在我从服务中获取数据的那一刻和我设置图表数据的那一刻之间添加一个alert（）时，才能正确显示数据。

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

此代码不起作用，图表为空，但是，如果我添加如下警告：

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);
}

有效！

我之前已经遇到过这个问题用于其他功能而且我从来不知道如何修复它。

编辑1：尝试将setChartData调用放入load all异步方法：

{{1}}

仍然无法正常工作。

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())
  );
}

Jhipster：数据加载可能太慢

1 个答案: