0

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

ex。

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

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

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

>FirebaseListObservable 

を私はそのようなflatMapObservable.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) 

} 

答えて

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

+0

はありがとう、それをチェックし、良いドキュメントを持っています。私はまだ私はドキュメントを読むことを学ぶ必要があります。私はあなたの解決策に気付きましたが、私は望みの結果を得られませんでしたが、少なくとも私はもっと近づいています。私が望むデータを持つ配列を得るために 'getGraphData()'メソッドの最後に '.flatMap(list => list)'を追加しなければなりませんでした。無関係かもしれない1つの問題、 'flatMap'は通常データを複製しますか? '[1000、1000、5000]の配列の代わりに' [1000、1000、5000、1000、1000、5000] 'が得られます。 ngOnitはvalをfirstVarに一回だけプッシュしますか? – DauvO

+0

実際に何が起こっているのか見ていますが、それを修正する方法がわかりません。監視対象に登録すると、コンソールログが空の配列で始まり、一度新しいインスタンスで満たされ、完了するまで繰り返されることに気付きました。ので、3つの項目のうち。 [1000、5000、1000]、[1000、5000、1000]のように[1000、5000、1000]という結果になると私は考えています。 1000、5000、1000]である。 プッシュ以外の方法もありますか?セットのようなものがうまくいくと思います。 – DauvO

関連する問題