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是一个使用可观察序列组成异步和基于事件的程序的库。” 可观察量基于Observer/Subscriber pattern。基本上，不考虑数据，从事件的角度思考 当您使用此返回this.af.database.list('graphdata/${this.uid}')时，会创建一个observable，它等待完成异步调用的事件（即收集的数据或错误）。 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有很好的文档，请检查here

如何返回数组而不是FirebaseListObservable

1 个答案: