我如何返回阵列而不是firbaselistobservable

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

控制台记录正确的数据。

ex。[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

您无法正确使用可观察到的，请记住它是异步的。

关于可观察到的简短说明：
" RXJS是使用可观察的序列来组成异步和基于事件的程序的库。"
观察者基于观察者/订户模式。基本上，不要在数据方面考虑事件。
当您使用此返回this.af.database.list('graphdata/${this.uid}')时，会创建一个可观察的可观察的，该可观察等待该事件已完成异步调用（即收集的数据或错误）。 observers或RXJS -subscribers中使用的术语必须注册观察者，以告诉WWE对您的事件感兴趣，如果某些数据随附，请将其传递给我们。可观察的可以有多个订户。
在您的情况下，无需使用Flatmap，只需通过数组，然后设置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有良好的文档，请在此处检查