如何通过Observable从Firebase取数？FirebaseListObservable导入报错求助

嘿，这个问题我很熟悉——AngularFire2从v5版本开始对数据库模块的API做了大改，FirebaseListObservable这个旧类型已经被彻底移除了，所以你才会遇到导入错误。下面是具体的解决方法和正确的数据实现方式：

为什么会报错？ #

AngularFire2 5.x版本重构了数据库相关的API，原来的FirebaseListObservable和FirebaseObjectObservable被废弃，换成了AngularFireList（对应列表数据）和AngularFireObject（对应单条数据）这两个新类型，同时获取数据的方式也有了小变化。

一步步解决问题 #

1. 修正导入语句 #

把原来的导入替换成下面的，用新的AngularFireList类型，同时需要从rxjs导入基础的Observable：

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

2. 更新HomePage的代码逻辑 #

现在不能直接把db.list()的结果赋值给FirebaseListObservable类型的变量了，需要先保存列表引用，再通过对应的方法获取Observable数据流：

export class HomePage {
  items: Observable<any[]>; // 用基础Observable类型接收数据流
  private itemsRef: AngularFireList<any>; // 保存列表引用，方便后续增删改操作

  constructor(public db: AngularFireDatabase) {
    // 先获取数据库中restaurant_menu路径的列表引用
    this.itemsRef = db.list('/restaurant_menu');
    
    // 通过valueChanges()获取纯数据的Observable
    this.items = this.itemsRef.valueChanges();

    // 订阅这个Observable才能拿到实际数据（控制台打印测试）
    this.items.subscribe(menuData => {
      console.log('餐厅菜单数据:', menuData);
    });
  }
}

额外小提示：两种获取数据的方式 #

根据你的需求，还可以选择另一种获取数据的方法：

• valueChanges()：只返回数据库里的原始数据，没有键值（key）等元数据，适合只需要展示数据的场景。
• snapshotChanges()：返回包含数据和元数据（比如每条数据的key）的快照，适合需要对数据进行修改、删除操作的场景，示例代码：

this.items = this.itemsRef.snapshotChanges().map(changes => {
  // 把快照转换成包含key和数据的对象数组
  return changes.map(change => ({
    key: change.payload.key,
    ...change.payload.val()
  }));
});

版本兼容性确认 #

你当前使用的firebase: "^4.12.0"和AngularFire2: V5.0.0-rc6版本是完全兼容的，不需要调整依赖版本哦。

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