FirebaseListObservableの代わりに配列を返す方法

Question

私はAngular-cli組み込みアプリケーションでng2-chartsを使用しています。私はかなり新しいので、どんな助けもありがとう。 Firebaseでデータを設定しました。私はそのデータにアクセスするためのサービスにメソッドを作成し、このコードを使用すると、コンソールは正しいデータを記録します。

ex。

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

およびコンポーネント内の変数に代入しよう：私はそうのような結果を返すようにする方法を変更したとき[1000, 5000, 2000]

問題があります。私はいつものコンソールログを取得：

>FirebaseListObservable 

を私はそのようなflatMapとObservable.combineLatest()を使用するなど、自分の目的の結果を取得するためのさまざまな方法を見てきましたが、私は他の結果を得ることができません。変数に配列として割り当てたいjsonデータが棒グラフに表示されています。私はfirstVar新しいFirebaseデータを割り当てたい

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'} 
    ]; 

。助言がありますか？

は、私は通常、このようなメソッドにアクセス：あなたは正しく観測を使用していない

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

    } 

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

} 

Answer 1

、それは非同期です覚えています。観測上の

簡単なノート：
「RxJSは、観察可能な配列を使用することにより、非同期およびイベントベースのプログラムを構成するためのライブラリです。」
対象はObserver/Subscriber patternに基づいています。基本的には、はデータという点では考えていませんが、事象に関してはと考えています。
この戻り値this.af.database.list('graphdata/${this.uid}')を使用すると、非同期呼び出しが行われた（つまり、データが収集されたかエラーが発生した）かを示すイベントを待機するオブザーバブルが作成されます。 observersまたはrxjs - subscribersで使用されている用語は、一部のデータがplsに渡された場合に私たちに渡す場合、wweがあなたのイベントに興味を持っていることを伝えるためにiwthを登録する必要があります。オブザーバブルには複数のサブスクライバが存在できます。
フラットマップを使用する必要はありません。そのまま配列を渡して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