Ionic / Firebase RTDB - 用于导航的 Gey 对象键

Question

我正在尝试为使用 Firebase RTDB 的 Ionic 应用程序创建简单的导航。

从我的 AngularFireList 中获取每个对象的对象键值的最佳方法是什么？

我目前有返回 AngularFireList 的提供程序

  public categoryList: AngularFireList<any>;
  getCategoryList(): AngularFireList<any> {
    this.categoryList = this.afDatabase.list(`/categories`);
    return this.categoryList;
  }

在我的页面中，我使用 Observable 来显示页面中的数据。

home.ts

public categoryList: Observable<any>;
this.categoryList = this.categoryProvider.getCategoryList().valueChanges();

home.html

  <ion-card *ngFor="let category of categoryList | async" (click)="goToCategory(NEED CATEGORY.KEY HERE)">
      <div class="card-title">{{category?.title}}</div>
      <div class="card-subtitle">{{category?.description}}</div>
  </ion-card>

现在我想导航到不同的页面并获取对象键作为导航参数，但对象不包含键。

我已经检查了 AngularFire 5.0 Upgrade guide 并在我的页面构造函数中创建了以下函数：

this.afDb.list('categories').snapshotChanges().map(actions => {
        return actions.map(action => ({ key: action.key, ...action.payload.val() }));
      }).subscribe(items => {
        console.log(items);
        return items.map(item => item.key);
      });

并且能够记录包含密钥的对象。但是我不明白的是应该如何在我的提供者中构建这个函数并在我的页面中显示数据？

Answer 1

在你的提供者中返回一个 observable

getCategoryList():Observable<any> {
    return this.afDb.list('categories').snapshotChanges().map(actions => {
    return actions.map(action => ({ key: action.key, ...action.payload.val() }));
  })
}

在你的组件中

public categoryList: Observable<any>;
this.categoryList = this.categoryProvider.getCategoryList();