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

问题描述

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

  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（[]）; 
} 
  

控制台记录正确的数据。

前 [1000,5000,2000]

问题是当我改变方法来返回结果如下所示：

  getGraphData（）：Observable< any> {
 return this.af.database.list（`graphdata / $ {this.uid}`）
 .map（tspa => tspa.map（tpa => tpa。$ value））
} 
  pre> 
 
 
并尝试将其分配给组件中的变量。我总是得到以下的控制台日志：
 
 $ p $ > FirebaseListObservable 
  

我已经看到了不同的方法来获得我想要的结果，比如使用 flatMap 和 Observable .combineLatest（）但我不能得到任何其他结果。我有json数据，我想分配给一个变量作为一个数组，以便显示在我的条形图。

graph.ts

  data $：any; 
表格$：any; 
 $ b $ 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数据。任何建议？

我通常访问这样的方法：

pre $ ngOnInit（）{
this.firstVar = this.transactionsS.getGraphData（）;
console.log（this.firstVar）


$ b updateGraph（）{
this.firstVar = this.transactionsS.getGraphData（）
console.log（this.firstVar）



$ div class =h2_lin>解决方案

你没有正确使用Observable，记住它是不同步的。



关于Observables的简要说明：

RxJS是一个用于编写异步和基于事件的程序的库，可观察的序列。

Observable基于观察者/订阅者模式一>。基本上，不要用数据来思考，用事件来思考。

当你使用这个return this.af.database.list（ 'graphdata / $ {this.uid}'），创建一个observable等待异步调用完成的事件（即数据收集或错误）。
观察者或rxjs中使用的术语 - 订阅者必须注册使用obserbale来告诉它wwe是对你的事件感兴趣，如果有一些数据，请将它传递给我们。一个observable可以有多个订阅者。

在你的情况下，不需要使用flatmap，只需传递数组，然后设置 subscriber（val => this.firstVar = VAL）。



  getGraphData（）：Observable< any> {
 //创建可观察的并为要发送的数据添加映射运算符到订户
返回this.af.database.list（`graphdata / $ {this.uid}`）
 .map（tspa => tspa.map（tpa => tpa。$ value） ）; 
} 
 
 
 firstVar：string [] = []; 
 ngOnInit（）{
 //使用subscribe捕获已发布的数据
 this.transactionsS.getGraphData（）。subscribe（（val）=> this.firstVar = val）; 
 console.log（this.firstVar）; //这将不起作用
 
 
 
 updateGraph（）{
 this.transactionsS.getGraphData（）。subscribe（（val）=> this.firstVar = VAL）; 
 
 
 
 
 
 $ r xjs有很好的文档，请检查这里 
 
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)

}

解决方案
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

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