Question

我在加载Angular Component时遇到了一些问题。在此组件中，我使用我的数据服务检索一些API数据。在这个数据服务中，我有一个函数getAllData（）。

getAllData()
{
return this._http.get<IData[]>(this.apiUrl)
        .catch(this.handleError);
}

在我的构件中，在我的构造函数中，我发送了我的数据服务。

constructor(private _dataService: DataService) {}

在我的组件的ngOnInit函数中，我使用数据服务来检索我的数据：

ngOnInit(): void {
 this._dataService.getAllData()
   .subscribe(
   data => this.data = JSON.stringify(data),
   error => this.errorMessage = <any>error,
   () => 
   {
    // In here, I use the received data

    let root = JSON.parse(this.data);
    let ndx = crossfilter(root);
    let all = ndx.groupAll();

   // Here I create multiple dimensions in the data, to create charts 
      where you can filter through. Eventually I call the 
      dc.renderAll() to draw the charts.
  }

这里的问题是，有时页面没有按预期加载，也没有显示单个图表。有时候它有效，有时则不然。

我希望能指出正确的方向，因为我似乎无法弄清楚出了什么问题。提前谢谢！

Answer 1

尝试以这种方式编辑ngOnInit方法：

ngOnInit(): void {
    this._dataService.getAllData()
        .subscribe(
            data => {
                this.data = JSON.stringify(data)

                let root = JSON.parse(this.data);
                let ndx = crossfilter(root);
                let all = ndx.groupAll();

            },
            error => this.errorMessage = < any > error
        )
}

通过这种方式，您可以确保使用this.data给它一个值，这应该可行

Angular Component并不总是正确加载数据

1 个答案: