使用 angularfire2 连接 2 个节点答案

【问题标题】：Joining 2 nodes with angularfire2使用 angularfire2 连接 2 个节点
【发布时间】：2017-05-12 14:31:20
【问题描述】：

我试图将用户收藏的类别映射到类别节点以检索其详细信息。

我的打字稿代码：

ionViewDidLoad(categorykey:string){
console.log('Hello Manage Favourite Page');
let userid = this.authData.getID();

this.favouritecategories = this.af.database.list(`/users/${userid}/favourites`)
  .map(favourites => {
    favourites.map(category => {
      let categorykey = category.$key
      console.log(categorykey);
      category.favname = this.af.database.object(`/test/${categorykey}`)
    });
      return favourites;
  });

我的 Html 代码：

<div *ngFor="let region of favouritecategories | async; let i = index;">

    <ion-item (click)=" category.hidden = !category.hidden; category.visible = !category.visible" detail-none><b>{{i+1}}.{{ (category.favname| async)?.name }}</b>
      <ion-icon name="arrow-down" [hidden]="category.visible" item-right></ion-icon>
      <ion-icon name="arrow-up" [hidden]="!category.visible" item-right></ion-icon></ion-item>

</div>

使用上面的代码，我只设法检索了类别的名称，而不是区域名称。有人知道怎么做吗？

【问题讨论】：

标签： javascript angular firebase firebase-realtime-database angularfire2

【解决方案1】：

您实际上并没有返回修改后的地图。您想要执行以下操作（针对最新的 AngularFire 版本进行了修改）：

let listObservable = this.af.database.list(`/users/${userid}/favourites`);
// use snapshotChanges() as this contains the keys
this.favouritecategories = listObservable.snapshotChanges()
  .map(snapshots => {
    // note that we return the inner .map()!
    return snapshots.map(snap => {
      let data = snap.val();
      data.favname = this.af.database.object(`/test/${snap.key}`).valueChanges();
      // note also that we return the transformed data
      return data;
    });
  });

与原发帖者问题的不同之处：

应该使用 .valueChanges() 为 ngFor 操作获取有用的 observable
默认情况下，$key 不再包含在数据中
但可以使用 .snapshotChanges() 获得

其他一些有用的提示：

避免在分布式数据中使用连续的数字 ID（即数组）
写下你以后怎么读的数据
避免试图使 NoSQL 看起来像带有大量 fkey 引用和人为规范化的 SQL。作为一般规则，只需将名称存储在您将阅读它们的位置即可。
可以对数据进行非规范化。

【讨论】：