类型 'Observable<{}[]>' 不可分配给类型 'AngularFireList<any>'

Question

我正在关注tutorial 关于使用 AngularFire2。

类型 'Observable' 不可分配给类型 'AngularFireList'。 'Observable' 类型中缺少属性 'query'。

实际上在从this 看到一些参考基础之后。也尝试在repo 中做同样的事情，但仍然很不幸没有找到答案

代码如下：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@IonicPage()
@Component({
  selector: 'page-graph-sensor',
  templateUrl: 'graph-sensor.html',
})
export class GraphSensorPage {
  sensorData: AngularFireList<any[]>;

  constructor(public navCtrl: NavController, public navParams: NavParams, public firedb: AngularFireDatabase) {
    this.sensorData = firedb.list('/reading').valueChanges();
    console.log(JSON.stringify(firedb.list('/reading').valueChanges()));
  }

Answer 1

valueChanges 是一个Observable，因此如果不订阅，您将无法取回JSON 数据。我假设您想查看数据？

尝试运行；

 this.sensorData: any[];


 firedb.list('/reading').valueChanges()
   .subscribe(sensorData => {
     this.sensorData = sensorData;
   });

您也不应该在constructor 中运行此逻辑。相反，您应该在ngOnInit 中加入。订阅时，您有责任取消订阅。一个简单的模式是取消订阅ngOnDestroy。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Subscription } from 'rxjs/Subscription';

@IonicPage()
@Component({
  selector: 'page-graph-sensor',
  templateUrl: 'graph-sensor.html',
})
export class GraphSensorPage implements OnInit {
  sensorData$: Subscription;
  sensorData: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams, public firedb: AngularFireDatabase) { }

  ngOnInit() {
    this.sensorData$ = firedb.list('/reading').valueChanges()
      .subscribe(sensorData => {
        this.sensorData = sensorData;
      });
  }

  ngOnDestroy() {
    this.sensorData$.unsubscribe();
  }
}