Question

我正在努力克服这种逻辑，找不到我错的地方。我正在使用AngularFire，Ionic 3和Firebase。

我有新闻Feed。它由来自此firebase调用的帖子填充：

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

在我看来，*ngFor遍历帖子列表以显示它们。

现在我被卡住了。

如果当前用户已经喜欢它，我想在帖子上显示一个完整的红心。如果没有，我希望它是灰色的并概述。

在我看来，我有这个：

<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之类的数组对象，并根据您的使用情况更改其值。然后按如下所示使用它。

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个按钮。你可以这样做。

<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>

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

1 个答案: