How do I return an array instead of a FirebaseListObservable

问题

I have ng2-charts working on my Angular-cli built application. I'm pretty new, so any help is appreciated. I have data setup on Firebase. I create a method in a service to access that data and when I use this code

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

the console logs the correct data.

ex. [1000, 5000, 2000]

the problem is when I change the method to return the result like so:

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

and try to assign it to a variable in a component. I always get the console log of:

>FirebaseListObservable

I've seen different methods for getting my desired result such as using flatMap and Observable.combineLatest() but I can't get any other result. I've got json data that I want to assign to a variable as an array in order to display it in my bar chart.

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

i would like to assign firstVar the new Firebase data. Any suggestions?

i usually access the method like this:

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

  }

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

}

回答1:

you are not correctly using the Observables, remember it's asychronous.

A brief note on Observables:
"RxJS is a library for composing asynchronous and event-based programs by using observable sequences."
Observables are based on Observer/Subscriber pattern. Basically, don't think in terms of data, think in terms of events.
When you use this return this.af.database.list('graphdata/${this.uid}'), an observable is created which waits for the event thats says asynchronous call is done (i.e. data collected or error). observers or the term used in rxjs -subscribers must register iwth the obserbale to tell it that wwe are interested in your events, if some data comes along pls pass it to us. An observable can have multiple subscribers.
In your case there is no need to use flatmap, just pass the array as it is and set 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 have good documentation, check it here

来源：https://stackoverflow.com/questions/40787208/how-do-i-return-an-array-instead-of-a-firebaselistobservable