Question

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

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

我目前有提供者返回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>

现在我想导航到不同的页面并将Object-key作为导航参数，但该对象不包含该键。

我已经检查过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

在您的提供者中返回一个可观察的

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();

Ionic / Firebase RTDB - 用于导航的Gey Object-key

1 个答案: