如何返回数组而不是 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]

问题是当我更改返回结果的方法时：

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 是一个使用可观察序列组成异步和基于事件的程序的库。”
Observables 基于Observer/Subscriber pattern。基本上，不要考虑数据，要考虑事件。
当你使用这个 return this.af.database.list('graphdata/${this.uid}') 时，会创建一个 observable，它等待表示异步调用完成的事件（即数据收集或错误）。 observers 或 rxjs 中使用的术语 -subscribers 必须在 obserbale 中注册以告诉它 wwe 对您的事件感兴趣，如果有一些数据，请传递给我们。一个 observable 可以有多个订阅者。
在您的情况下，无需使用平面图，只需按原样传递数组并设置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