如何从angularfire2列表中访问子节点的值?

时间:2017-08-31 14:36:52

标签: firebase firebase-realtime-database ionic3 angularfire2

我有一个angularfire2列表,用于显示帖子列表。每个帖子都包含一个子节点(收藏夹),其中包含将其标记为收藏夹的用户的ID。

我希望能够做的是将收藏夹与当前用户ID进行比较,以确定是否显示添加到收藏夹按钮。

我的问题是,如何访问子节点收藏夹中的值以检查它是否包含当前用户,以便我可以使用* ngIf隐藏按钮?

示例模板:

<ion-card *ngFor="let item of posts | async">
    <img src="{{ item.img }}" />
    <ion-card-content>
        <button ion-button (click)="postsProvider.addFavourite(item.$key)">add to favourites</button>
        <p>
            {{ item.reason }}
        </p>
    </ion-card-content>
</ion-card>

示例结构:

"reasons" : {
    "-KsjNGF9MOj9PYVtcP0F" : {
      "favourites" : {
        "wYWVy8eR85btVhLw7ra9eLSce632" : true,
        "l6ivMgzNE9ZUmHQRwySoaMgiW0J3" : true
      },
      "img" : "https://firebasestorage.googleapis.com",
      "reason" : "asadafaf",
      "userId" : "wYWVy8eR85btVhLw7ra9eLSce632"
    },
    "-KsjWsxJT14IZT-u-mSZ" : {
      "dateCreated" : "Tue Aug 29 2017 18:38:02 GMT+0000 (GMT)",
      "favourites" : {
        "l6ivMgzNE9ZUmHQRwySoaMgiW0J3" : true
      },
      "img" : "https://firebasestorage.googleapis.com/v0/b/",
      "reason" : "asdasdasda",
      "userId" : "wYWVy8eR85btVhLw7ra9eLSce632"
    },
  }

我一直在研究应用程序的其他部分,即显示用户收藏夹的页面,我发现了一些对我来说很奇怪的东西。

收藏页面使用以下功能获取收藏的项目

  getUserFavourites() {
    let user = firebase.auth().currentUser.uid;
    return this.db.list('/reasons/', {
      query: {
          orderByChild: 'favourites/' + user + '/favourited',
          equalTo: true
      }
    });
  }

然后我显示如下信息:

<ion-content>
    <ion-card *ngFor="let item of posts | async" (click)="itemTapped($event, item)">
        <div class="card-img" [style.backgroundImage]="'url(' + item.img + ')'"></div>

        <div class="remove-favourite" (click)="postsProvider.removeFavourite(item.$key)">
            <ion-icon name="close"></ion-icon>
        </div>
        <ion-card-content>
            <ion-card-title>
                {{ item.reason }}

            </ion-card-title>
            <p>
                {{ item.favourites[userId].note }}
            </p>
        </ion-card-content>
    </ion-card>
</ion-content>

使用此方法,我可以使用{{item.favourites [userId] .note}}并返回值。但是,除了稍微不同的查询(下面)之外,几乎相同的设置同样不起作用。

getPosts(limit) {
    return this.db.list('/reasons', {
      query: {
          limitToFirst: limit
      }
    });
 }

我觉得我错过了一些明显的东西,但我不明白为什么除了使用略有不同的查询之外,结果之间会有差异。

1 个答案:

答案 0 :(得分:0)

我找到了导致问题的原因。

当我使用* ngIf =“post.favourites [userId] .favourited!== true”或试图显示该值时,如果帖子没有任何收藏夹,那么它会显示错误。

要解决此问题,我添加了一项检查,以确保通过添加或声明来设置post.favourites

*ngIf="!post.favourites || post.favourites[userId].favourited !== true"