Ionic使用AngularFire2与Firebase获取数据时遇FirebaseListObservable错误

嘿，我看到你在使用这个版本的 AngularFire2 和 Firebase 时遇到了数据获取的问题——这个版本刚好是 AngularFire2 从旧 API 切换到新的 RxJS 驱动 API 的过渡版本，很多旧写法已经被弃用，这大概率是你遇到问题的核心原因。我来一步步帮你修正：

1. 修正导入语句 #

你之前导入的 FirebaseListObservable 在 v5.0.0-rc.6 里已经被废弃，现在要换成对应列表数据的 AngularFireList（如果是单条数据则用 AngularFireObject），同时导入路径也有变化：

// 替换旧的导入
// import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

// 改成新的导入
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

2. 更新组件内的变量声明 #

把原来的 FirebaseListObservable 类型替换成 AngularFireList：

// 旧写法
// books: FirebaseListObservable<any[]>;

// 新写法
books: AngularFireList<any[]>;

3. 正确获取数据并处理 #

现在获取列表数据的方法返回的是 AngularFireList 对象，你可以通过 valueChanges()（只返回数据）或者 snapshotChanges()（包含数据和元信息）方法获取 Observable 流，然后选择在组件内订阅处理，或者在模板里用 async 管道展示：

constructor(private db: AngularFireDatabase) {
  // 指向你的 Firebase 实时数据库节点
  this.books = this.db.list('/books');

  // 若需要在组件内处理数据，可订阅 valueChanges()
  this.books.valueChanges().subscribe(booksData => {
    console.log('获取到的书籍数据：', booksData);
    // 这里可以添加你的数据处理逻辑
  });
}

4. 模板中用 async 管道展示数据 #

在模板里不要直接遍历 books，而是通过 async 管道自动完成订阅和取消订阅操作：

<ul>
  <li *ngFor="let book of books | async">
    {{ book.title }} - {{ book.author }}
  </li>
</ul>

额外检查点 #

• 确认 Firebase 配置正确：在 app.module.ts 里要正确初始化 AngularFire，确保配置信息和你 Firebase 控制台里的一致：

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

const firebaseConfig = {
  apiKey: "你的 API Key",
  authDomain: "你的 Auth Domain",
  databaseURL: "你的数据库 URL",
  projectId: "你的项目 ID",
  storageBucket: "你的存储桶",
  messagingSenderId: "你的消息发送 ID"
};

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule
  ]
})
export class AppModule { }

• 数据库规则权限：如果还是获取不到数据，检查 Firebase 实时数据库的规则，测试阶段可以暂时设置为开放权限（生产环境一定要改回严格规则）：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

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