AngularFire2中.valueChanges()无法返回数据库数据的问题

作为刚踩过AngularFire和RxJS坑的开发者，我太懂你这种看不到数据库数据的困惑了！先帮你梳理下问题和解决办法：

问题场景还原 #

你跟着教程写了以下代码：

items: Observable<any[]>;
constructor(db: AngularFireDatabase) {
  this.items = db.list('items').valueChanges();
}

直接打印this.items时，控制台只输出了Observable的内部结构，看不到数据库里的测试数据：

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator : MapOperator {project: 茠, thisArg: undefined}
source : Observable {_isScalar: false, _subscribe: 茠}
_isScalar : false
__proto__ : Object

你的Firebase实时数据库结构是正确的：

{
  "items": {
    "1": {
      "code": "C001",
      "name": "client test"
    },
    "2": {
      "code": "C002",
      "name": "client test 2"
    }
  }
}

组件导入和NgModule配置也没问题：

// 组件导入
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';

// NgModule配置
AngularFireModule.initializeApp({ /* firebase配置信息 */ }),
AngularFireDatabaseModule

问题分析与解决 #

1. 先搞懂Observable的特性（基础必知） #

首先，Observable是懒加载的数据流，直接打印它只会显示自身的结构，不会主动去拉取数据库数据。你需要通过.subscribe()方法订阅它，才能触发数据请求并拿到实际内容：

items: Observable<any[]>;
constructor(db: AngularFireDatabase) {
  this.items = db.list('items').valueChanges();
  // 订阅数据流，获取并打印实际数据
  this.items.subscribe(data => {
    console.log('数据库返回的数据：', data);
  });
}

正常情况下，这样就能看到items节点下的数组数据了。

2. 版本不兼容是你遇到的核心问题 #

如果订阅后还是拿不到数据，那大概率是RxJS版本和AngularFire不匹配导致的。AngularFire对RxJS的版本有严格要求，旧版本的AngularFire可能无法适配过高或过低的RxJS版本。

你提到升级RxJS到6.2.0后问题解决，这里给其他遇到类似问题的人补充下升级命令：

npm install rxjs@6.2.0 --save

如果你的项目里用到了旧的RxJS语法，可能还需要安装对应版本的rxjs-compat来兼容，但新项目一般直接升级RxJS到匹配版本即可。

内容的提问来源于stack exchange，提问作者alexSantif