Element in * ngFor

Question

Ich möchte eine Funktion machen, die Benutzer wie Kommentare mögen können Instagram kann andere Beiträge mögen.

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

dann erstelle ich zwei Variable in der Komponente zu steuern, welches Symbol angezeigt werden soll.

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

Mein Problem ist alle meine Schleifen-Elemente von * ngFor in der gleichen Zeit geändert, und ich hoffe nur ausgewählter ändern. Ich weiß, dass ich globale Variable nicht verwenden kann, aber wie man eine Eigenschaft auf Elementen bindet, die separat in * ngFor erstellt werden? Vielen Dank!

Answer 1

wie diese versuchen, ohne eine globale Variable zu verwenden, kann Ihnen helfen,

<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

Sie eine weitere hinzuzufügen, haben Schlüssel ‚is_liked‘ in Ihrem Array ‚Kommentare‘. aufgrund dessen wir identifizieren, ob der Kommentar gemocht oder nicht gemocht wird.

Kommentare = [ {is_liked: false} ]

in Ihrer Methode den Index des Arrays übergeben werden und dass Kommentar

entsprechend

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

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

hinzuzufügen Schlüssel in Ihrem Array-Objekt gefallen oder missfallen machen Führen Sie die Schleife wie folgt aus:

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