typescript - 在我的 Angular 应用中，在进行 HTTP 调用并使用 for 循环后，如何在图表中使用更新的数据？

我正在使用 angular2-highcharts，但我认为这个问题并不特定于它。

我遇到的问题是图表在更新为新数据之前会先用一个空数组渲染。我最终希望通过点击事件更新 testArray，使其通过 API 调用获取数据，并启动一个包含显示该数据的图表组件的对话框。因此，我需要让这一切以某种方式同步发生，或者使用可观察对象来等待数据？

模板：

<chart type="StockChart" [options]="options"></chart>

Typescript ：

testArray = []
options: Object;

httpCall():Observable<any>{
  return this._http.get(httpUrl, options)
      .map((res:Response)=> res.json()
)};

updateArray(){
  this.httpCall()
    .subscribe(res =>{
        for (let data of res.data){ 
           this.testArray.push([
                 Date.parse(data['date']), 
                 parseInt(data['value'])
           ])
        }
    })
};
// This is for chart:
makeGraph(){
  this.options = {
            series: [{
                      type: 'column',
                      data: this.testArray,
                    }]
  } 
}

任何帮助都会很棒

答案＃1

你应该了解一下路由数据解析器。我在一个关于如何以 Ionic 方式做类似事情的问题中写过关于它们的内容。

这应该能为你自己实现它们提供一个路线图。

(Ionic 在底层使用 Angular，但不使用路由，而是使用导航控制器——它刚刚又被改成了其他东西)。

如果你需要更多细节，我是在 Angular 大学的以下课程中学习这些内容的：

• Rxjs 与响应式模式 Angular 架构课程

具体来说，这些内容涵盖在以下课程科目之间：

• 切换分支路由器数据预取和加载指示器，以及
• 实现路由器加载指示器

源代码也在Github上。你必须知道从视频中检出的分支，并跟着操作才能获得你需要的代码。