如何返回数组而不是 FirebaseListObservable [英] How do I return an array instead of a FirebaseListObservable

问题描述

我有 ng2-charts 正在处理我的 Angular-cli 构建的应用程序.我很新，所以任何帮助表示赞赏.我在 Firebase 上设置了数据.我在服务中创建了一个方法来访问该数据，当我使用此代码时

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.

例如.[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

我已经看到了获得所需结果的不同方法，例如使用 flatMap 和 Observable.combineLatest() 但我无法获得任何其他结果.我有 json 数据，我想将其作为数组分配给变量，以便在条形图中显示.

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

我想为 firstVar 分配新的 Firebase 数据.有什么建议吗?

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

我通常这样访问方法:

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

  }

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

}

推荐答案

您没有正确使用 Observable，记住它是异步的.

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

关于 Observable 的简要说明:
RxJS 是一个使用可观察序列编写异步和基于事件的程序的库."
Observables 基于观察者/订阅者模式.基本上，不要考虑数据，而是考虑事件.
当您使用此返回 this.af.database.list('graphdata/${this.uid}') 时，将创建一个可观察的对象，它等待表示异步调用完成的事件(即数据收集或错误).observers 或在 rxjs 中使用的术语 -subscribers 必须在 obserbale 上注册以告诉它 wwe 对您的事件感兴趣，如果有一些数据出现，请将其传递给我们.一个 observable 可以有多个订阅者.
在您的情况下，无需使用 flatmap，只需按原样传递数组并设置 subscriber(val => this.firstVar=val).

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 有很好的文档，请在这里查看

rxjs have good documentation, check it here

这篇关于如何返回数组而不是 FirebaseListObservable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！