ngFor中的Angular 4切換fontawesome按鈕

Question

我意識到這可能是這個或這個的重復，但是我對此視而不見。 我從rest api獲取我的數據作為對象，其中包含票數。 即使計數器工作正常，切換功能也適用於所有字體驚人的圖標，而不僅僅是特定的圖標。 我希望在已填充的心臟圖標被按下時在特定故事上切換。 反之亦然。

我正在使用angular4和fontawesome 5。

數據來自我的服務中的可觀察值。

零件：

private vote(story) {
    this.liked = !this.liked; //heart filled
    if (story.userVote == false) {
      this.storiesService.voteStory(story.objectID)
        .subscribe(
        (data) => {
          console.log("Added upvote")
          story.votes++;            //api counter
          console.log(story.votes)
          story.userVote = true;    //api call
        })
    } else if (story.userVote == true) {
      this.storiesService.unVoteStory(story.objectID)
        .subscribe(
        (data) => {
          console.log("Removed upvote")
          story.votes--;
          console.log(story.votes)
          story.userVote = false;
        })
    }
  }

HTML：

  <a (click)="vote(story)" style="font-size: 13px;" *ngIf="!liked" matTooltip="Like story" matTooltipPosition="above"><i class="far fa-heart"></i> {{ story.votes || 0 }} </a>
  <a (click)="vote(story)" style="font-size: 13px;" *ngIf="liked" matTooltip="Like story" matTooltipPosition="above"><i class="fas fa-heart"></i> {{ story.votes || 0 }} </a>

Answer 1

this.liked指的是liked在組件屬性。 您必須為每個單獨的story切換/存儲一個liked屬性。 否則，將this.liked切換為true / false將設置整個組件的屬性，因此對於每個*ngIf同時設置為true / false 。

您需要執行的操作與此類似：

<a (click)="vote(story)" style="font-size: 13px;" *ngIf="!story.liked" matTooltip="Like story" matTooltipPosition="above"><i class="far fa-heart"></i> {{ story.votes || 0 }} </a>
<a (click)="vote(story)" style="font-size: 13px;" *ngIf="story.liked" matTooltip="Like story" matTooltipPosition="above"><i class="fas fa-heart"></i> {{ story.votes || 0 }} </a>

然后像這樣切換它：

private vote(story) {
    story.liked = !story.liked;
    //Cut for brevity
  }

Answer 2

為什么不使用ngClass （和僅一個圖標標簽）代替此ngIf來切換fas / far類？

<i ngClass="{'fa-heart': true, 'far': !liked, 'fas': liked }">

Answer 3

所以我在我的api中使用了userVote布爾值，最終像這樣：

零件：

private vote(story) {
    if (story.userVote == false) {
      story.userVote = !story.userVote; //heart filled
      ....
}

HTML：

<a (click)="vote(story)" style="font-size: 13px;" *ngIf="story.userVote===false" matTooltip="Like story" matTooltipPosition="above"><i class="far fa-heart"></i> {{ story.votes || 0 }} </a>
<a (click)="vote(story)" style="font-size: 13px;" *ngIf="story.userVote" matTooltip="Like story" matTooltipPosition="above"><i class="fas fa-heart"></i> {{ story.votes || 0 }} </a>