Как вернуть массив вместо FirebaseListObservable

Question

У меня есть ng2-charts, работающий над моим встроенным приложением Angular-cli. Я довольно новый, поэтому любая помощь ценится. У меня есть настройка данных на Firebase. Я создаю метод в службе доступ к этим данным и, когда я использую этот код

getGraphData():Observable<any>{ 
     var graphData$ = this.af.database.list(`graphdata/${this.uid}`) 
      .map(tspa => tspa.map(tpa => tpa.$value)) 
      .do(console.log); 

     graphData$.subscribe(); 
     return Observable.of([]); 
} 

консоль записывает правильные данные.

ex. [1000, 5000, 2000]

проблема, когда я изменить метод возвращает результат примерно так:

getGraphData():Observable<any>{ 
     return this.af.database.list(`graphdata/${this.uid}`) 
      .map(tspa => tspa.map(tpa => tpa.$value)) 
} 

и попытаться присвоить его переменной в компоненте. Я всегда получаю журнал консольной:

>FirebaseListObservable 

Я видел различные методы получения моего желаемого результата, такие как использование flatMap и Observable.combineLatest(), но я не могу получить любой другой результат. У меня есть данные json, которые я хочу присвоить переменной как массив, чтобы отобразить ее в моей гистограмме.

graph.ts

data$: any; 
    form$: any; 

    public barChartLabels:string[] = ['Account1', 'Account2', 'Account3', 'Account4', 'Account5', 'Account6', 'Account7']; 
    public barChartType:string = 'bar'; 
    public barChartLegend:boolean = true; 

    firstVar:any = [28, 48, 40, 19, 86, 27, 90]; 
    secondVar:any = [28, 48, 40, 19, 86, 27, 90]; 

    public barChartData:any[] = [ 
    {data: this.firstVar, label: 'Series A'}, 
    {data: this.secondVar, label: 'Series B'} 
    ]; 

я хотел бы назначить firstVar новые Firebase данные. Какие-либо предложения?

я обычно доступ к этому методу, как это:

ngOnInit() { 
    this.firstVar = this.transactionsS.getGraphData(); 
    console.log(this.firstVar) 

    } 

updateGraph(){ 
    this.firstVar = this.transactionsS.getGraphData() 
    console.log(this.firstVar) 

} 

Answer 1

вы не правильно используете наблюдаемыми, помните, что это asychronous.

Краткое замечание по наблюдаемым:
«RxJS библиотека для составления асинхронных и событий на основе программ с использованием наблюдаемых последовательностей.»
Наблюдения основаны на Observer/Subscriber pattern. В принципе, не думайте с точки зрения данных, думайте в терминах событий.
Когда вы используете это возвращение this.af.database.list('graphdata/${this.uid}'), создается наблюдаемое, которое ждет события, в котором говорится, что асинхронный вызов выполнен (т.е. собранные данные или ошибка). observers или термин, используемый в rxjs - subscribers, должен зарегистрировать iwth the obserbale, чтобы сообщить, что мы заинтересованы в ваших событиях, если некоторые данные поступают по PLS, передайте их нам. Наблюдаемый может иметь несколько подписчиков.
В вашем случае нет необходимости использовать flatmap, просто передайте массив, как есть, и установите subscriber(val => this.firstVar=val).

getGraphData():Observable<any>{ 
    // create observable and add map operator for data to be sent to subscriber 
    return this.af.database.list(`graphdata/${this.uid}`) 
      .map(tspa => tspa.map(tpa => tpa.$value)); 
} 


firstVar:string[] = []; 
ngOnInit() { 
    // use subscribe to capture published data 
    this.transactionsS.getGraphData().subscribe((val)=> this.firstVar=val); 
    console.log(this.firstVar); // this will not work 

    } 

updateGraph(){ 
    this.transactionsS.getGraphData().subscribe((val) => this.firstVar=val); 

} 

rxjs имеют хорошую документацию, проверить это here