ロード後のng2-highchartsチャートの更新

Question

私は、角度2、firebase、およびng2-highchartsを使用しています。私はそうのようfirebaseからそれらを受け取った後

私はデータを割り当てます。

this.items = af.database.list('/items'); 
this.optionsAsync = this.items.map(data => { 
    this.options.series[0].data = data.map(item => ([item.x, item.y])); 
    return this.options; 
}); 

は、その後、私は持っている私のビューテンプレートに：

<div [ng2-highcharts]="optionsAsync | async"></div> 

これは、最初のロード時に正常に動作しています。しかし、残念なことに新しいデータが受信されると、チャートは更新されません。何か案が ？

Answer 1

私はそうのよう@ViewChildと参照highcharts成分による解決策を見つけた：成分クラスの

：

import { ViewChild, Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [Ng2Highcharts] 
}) 
export class AppComponent { 
    @ViewChild(Ng2Highcharts) 
    chartElement: Ng2Highcharts; 

    private chartData = { 
     chart: { 
      zoomType: 'x' 
     }, 
     colors: ['rgba(255,0,255,1)'], 
     title: { 
      text: 'Items' 
     }, 
     credits: '', 
     series: [{ 
      type: 'area', 
      name: 'Items', 
      data: [] 
     }] 
    }; 
    chartData$ = new Subject(); 

    ngOnInit() { 
     this.items.subscribe((data: any) => { 
     this.chartData.series[0].data = data.map(item => ([item.x, parseFloat(item.y)])); 
     this.chartData$.next(this.chartData); 
     if(this.chartElement && this.chartElement.chart) { 
      var serieRef = this.chartElement.chart.series[0]; 
      serieRef.setData(this.chartData.series[0].data); 
     } 
    }); 
    } 
}