Populating Object property asyncronously with angular2 observables?

Question

I am trying to convert an angular2 component to use asynchronous data calls. I am displaying the data as on a chart using a dedicated charting library. The chart needs to b passed the data in a certain format (shown below).

public barChartData: any[] = [
    { data: this.dataService.getCellOEE('powders'), 
      label: 'OEE' }
];

The issue is that this.dataService.getCellOEE('powders') returns an observable. Which if I bind to the chart object like [datasets]="(barChartData | async)", throws an error because obviously barChartData is an object rather than an observable.

How can I asynchronously populate part of my static object with the resolved Observable data and then bind that static object to the datasets property of my Chart UI component?

Answer 1

I think you need something like:

public barChartData: any[] = [
    { data: null, 
      label: 'OEE' }
];
this.dataService.getCellOEE('powders').subscribe(value => barChartData[0].data = value);