我如何 return 数组而不是 FirebaseListObservable

Question

我 ng2-charts 正在开发我的 Angular-cli 构建的应用程序。我很新，所以任何帮助表示赞赏。我在 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]

问题是当我将方法更改为 return 结果如下：

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

并尝试将其分配给组件中的变量。我总是得到控制台日志：

>FirebaseListObservable

我见过不同的方法来获得我想要的结果，例如使用 flatMap 和 Observable.combineLatest()，但我无法获得任何其他结果。我有 json 数据，我想将其作为数组分配给一个变量，以便在我的条形图中显示它。

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 数据。有什么建议吗？

我一般是这样访问的：

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

  }

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

}

Answer 1

你没有正确使用 Observables，记住它是异步的。

关于 Observables 的简要说明：
"RxJS is a library for composing asynchronous and event-based programs by using observable sequences."
Observables 基于 Observer/Subscriber pattern。基本上，不要考虑数据，考虑事件。
当您使用此 return this.af.database.list('graphdata/${this.uid}') 时，会创建一个可观察对象，它会等待表示异步调用已完成的事件（即数据收集或错误）。 observers 或 rxjs 中使用的术语 -subscribers 必须在 obserbale 中注册以告诉它我们对您的活动感兴趣，如果出现一些数据请将其传递给我们。一个可观察对象可以有多个订阅者。
在您的情况下，无需使用平面图，只需按原样传递数组并设置 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

我如何 return 数组而不是 FirebaseListObservable

How do I return an array instead of a FirebaseListObservable

angular

firebase

firebase-realtime-database

angular2-services

ng2-charts