Question

我想制作一个功能，用户可以像评论类似的Instagram可以像其他人的帖子一样。

<div *ngFor="let comment of comments | orderBy: '-'+orderBy">
  <div class="comment-item" >
    <div class="row">
      <div class="col-md-8">
        {{comment.userName}}
      </div>
      <div class="col-md-4">
        {{comment.time | timeAgo}}
        <i class="fa fa-heart-o" aria-hidden="true" (click)="likeComment(comment._id)"
                        [@notliked]="notliked"></i>
       <i class="fa fa-heart" aria-hidden="true"  (click)="unlikeComment(comment._id)"
                           [@liked]="liked"></i>
       {{comment.like}}
      </div>
    </div>
    <div class="row">
    <div class="col-md-12">
     <p class="comment-content">{{comment.textArea}}</p>
    </div>
  </div>
</div>

然后我在组件中创建两个变量来控制应该显示哪个图标。

notliked = 'open';
liked = 'close';
likeComment(commentId) {
    this.liked = 'open';
    this.notliked = 'close';
    this.dataService.likeComment(commentId).subscribe(
        res=>{

        },
        error => console.log(error)
    )
}

unlikeComment(commentId) {
    this.liked = 'close';
    this.notliked = 'open';
    this.dataService.unlikeComment(commentId).subscribe(
        res=>{

        },
        error => console.log(error)
    )
}

我的问题是我的所有循环项目* ngFor同时更改，我希望只更改选定的一个。我知道我不能使用全局变量，但如何在* ngFor中单独创建的元素上绑定属性？谢谢！

Answer 1

在不使用任何全局变量的情况下尝试这样做，可以帮助您

<i class="fa fa-heart-o" aria-hidden="true" (click)="likeComment(comment)"
                [@notliked]="comment?.liked"></i>
<i class="fa fa-heart" aria-hidden="true"  (click)="unlikeComment(comment)"
                   [@liked]="!comment?.liked"></i>

 likeComment(commentId) {
    commentId.liked = true;
}

unlikeComment(commentId) {
    commentId.liked = false;
}

Answer 2

你必须再添加一个键＆＃39; is_liked＆＃39;进入你的阵列＆＃39;评论＆＃39;。由此我们确定评论是喜欢还是不喜欢。

注释= [ {is_liked：假} ]

在您的方法中传递数组的索引，并相应地使该评论受欢迎或不喜欢

likeComment(commentId,index) {
    comment[index].is_liked=true;
    this.liked = 'open';
    this.notliked = 'close';
    this.dataService.likeComment(commentId).subscribe(
        res=>{

        },
        error => console.log(error)
    )
}

在数组对象中添加键，像这样运行循环

for(let i=0;i<comments.length;i++){
  comments[i].is_liked=false;
}

* ngFor中的元素

2 个答案: