0

我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 数据，我想将其作为数组分配给一个变量，以便在我的条形图中显示它。

图.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)

}
4

1 回答 1

1

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

关于 Observables 的简要说明：
“RxJS 是一个使用可观察序列组成异步和基于事件的程序的库。”
Observables 基于观察者/订阅者模式。基本上，不要从数据的角度思考，从事件的角度思考。
当你使用这个 returnthis.af.database.list('graphdata/${this.uid}')时，会创建一个 observable，它等待表示异步调用完成的事件（即数据收集或错误）。 observers或 rxjs 中使用的术语 -subscribers必须注册 obserbale 以告诉它 wwe 对您的事件感兴趣，如果有一些数据出现，请将其传递给我们。一个 observable 可以有多个订阅者。
在您的情况下，无需使用 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 有很好的文档，在这里查看

于 2016-11-24T13:38:51.690 回答