Wie gebe ich ein Array anstelle einer FirebaseListObservable zurück

Question

Ich habe ng2-charts arbeiten auf meinem Angular-CLI gebaut Anwendung. Ich bin ziemlich neu, also wird jede Hilfe geschätzt. Ich habe Daten auf Firebase eingerichtet. Ich erstelle ein Verfahren in einem Dienst auf die Daten zugreifen und wenn ich diesen Code verwenden

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([]); 
} 

die Konsole protokolliert die richtigen Daten.

ex. [1000, 5000, 2000]

das Problem ist, wenn ich die Methode ändern das Ergebnis zurück wie so:

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

und versuchen Sie es in einer Komponente zu einer Variablen zuzuweisen. Ich bekomme immer das Konsolenprotokoll aus:

>FirebaseListObservable 

Ich habe verschiedene Methoden gesehen für mein gewünschtes Ergebnis zu erzielen wie mit flatMap und Observable.combineLatest() aber ich kann kein anderes Ergebnis. Ich habe JSON-Daten, die ich einer Variablen als Array zuweisen möchte, um sie in meinem Balkendiagramm anzuzeigen.

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

ich möchte firstVar die neuen Firebase Daten zuzuordnen. Irgendwelche Vorschläge?

i Zugriff in der Regel das Verfahren wie folgt aus:

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

    } 

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

} 

Answer 1

Sie sind nicht richtig die Observable verwenden, denken Sie daran es asychronous ist.

Eine kurze Notiz auf Observable: „RxJS ist eine Bibliothek für asynchrone und ereignisbasierte Programme unter Verwendung von beobachtbaren Sequenzen Komponieren“

Observables basieren auf Observer/Subscriber pattern. Grundsätzlich denke nicht in Bezug auf Daten, denke in Bezug auf Ereignisse.
Wenn Sie diese Rückkehr this.af.database.list('graphdata/${this.uid}') verwenden, wird eine Observable erstellt, die auf das Ereignis wartet, das besagt, dass asynchroner Aufruf ausgeführt wird (d. H. Daten gesammelt oder Fehler). observers oder der in rxjs - subscribers verwendete Begriff muss mit dem Observale registrieren, um es zu sagen, dass wir an Ihren Veranstaltungen interessiert sind, wenn einige Daten kommen, bitte übergibt es an uns. Ein Observable kann mehrere Abonnenten haben.
In Ihrem Fall ist es nicht notwendig Flatmap zu verwenden, übergeben Sie einfach das Array wie es ist und setzen Sie 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 haben eine gute Dokumentation, es here