检查当前用户是否喜欢 firebase 列表的帖子

Question

我正在为这个逻辑苦苦挣扎，找不到我错在哪里。我正在使用 AngularFire、Ionic 3 和 Firebase。

我有一个新闻提要。它由来自此 firebase 调用的 posts 填充：

this.postlist = this.db.list('/posts/').map( (arr) => { return arr.reverse();});

在我看来，*ngFor 循环遍历 post 的列表以显示它们。

现在是我卡住的地方。

如果当前用户已经喜欢，我想在 post 上显示一颗完整的红心。如果不是，我希望它是灰色和轮廓。

在我看来，我有这个：

<button ion-button icon-start (click)="likePost(post)" *ngIf="!likedPost(post)">
    <ion-icon name="md-heart-outline"></ion-icon> {{post.likes}}
</button>

<button ion-button icon-start (click)="likePost(post)" *ngIf="likedPost(post)">
    <ion-icon name="md-heart" color="redtext"></ion-icon> {{post.likes}}
</button>

我的 likedPost() 函数如下所示：

likedPost(post){

  //Init my own id
  let myId = this.userid;

  //Fetch the likes for this post in the firebase db
  let postLikersList = firebase.database().ref(`/likes/${post.$key}`); 

  //Check in postCheck if the list of likes for this post has one that is mine
  postLikersList.once("value")
    .then(function(snapshot) {
    var postCheck = snapshot.hasChild(`${myId}`);

      if (!postCheck) {

        //Outlined button
        return false;

      } else {

        //Full red button
        return true;

      }
    });
}

当我在控制台中记录结果时，它似乎工作正常，但按钮根本没有改变。

希望你能帮助我，也能帮助其他有同样问题的人。祝你有美好的一天！

Answer 1

您必须像这样维护数组对象 post.islikedPost 并根据您的用途更改其值 case.Then 如下所示使用它。

.html

<button ion-button icon-start (click)="likedPost(post)" *ngIf="!post.islikedPost">
    <ion-icon name="md-heart-outline"></ion-icon> {{post.likes}}
</button>

<button ion-button icon-start (click)="likedPost(post)" *ngIf="post.islikedPost">
    <ion-icon name="md-heart" color="redtext"></ion-icon> {{post.likes}}
</button>

另一个变体是你不需要 2 个按钮 all.You 可以这样做。

<button ion-button icon-start (click)="likedPost(post)">
 <ion-icon name="md-heart-outline" *ngIf="!post.islikedPost"></ion-icon> {{post.likes}}
 <ion-icon name="md-heart" color="redtext" *ngIf="post.islikedPost"></ion-icon> {{post.likes}}
</button>

检查当前用户是否喜欢 firebase 列表的帖子

Check if the current user has liked the posts of a firebase list

typescript

firebase-realtime-database

angularfire2

ionic3

angular