angular - 在进行 http 调用并使用 for 循环后，如何在我的 Angular App 图中使用更新的数据？

Question

我正在使用 angular2-highcharts但我不认为这个问题是它特有的。

我遇到的问题是图表在使用新数据更新之前使用空数组呈现。我最终想使用单击事件通过 API 调用更新 testArray 并启动一个包含显示该数据的图表组件的对话框。所以我需要这一切以某种方式同步发生或使用可观察到的数据来等待数据？

模板:

<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,
                    }]
  } 
}

任何帮助都会很棒

Answer 1

你应该看看router data resolvers .我在 question 中写了关于它们的文章关于以 ionic 方式做这样的事情。

这应该为您提供了如何自行实现它们的路线图。

(Ionic 在幕后使用 Angular，但不使用路由器，而是使用导航 Controller - 刚刚再次更改为其他东西)。

如果您需要更多详细信息，我在 Angular University 的以下网站了解了这些内容:

• Rxjs and Reactive Patterns Angular Architecture Course .
  

具体而言，这些内容涵盖在以下类(class)主题之间:

• Switch Branches Router 数据预取和加载指示符，以及
  
• 实现路由器加载指示器

源 Material 也在 Github 上。您必须知道要从视频中 checkout 哪些分支，然后继续操作以获得您需要的代码。