Question

我意识到这可能是重复的 this或this，但我对此视而不见。我从休息api获取我的数据作为对象，其中包含投票数。切换功能适用于所有fontawesome图标，而不仅仅是特定的图标，即使计数器工作正常。当按下图标时，我希望在特定故事上切换填充的心形图标。反之亦然，再次按下它。

我使用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属性。您必须为每个单独的liked切换/存储story属性。否则，将this.liked切换为true / false将设置整个组件的属性，因此每true为false / *ngIf在同一时间。

你需要做的是这样的事情：

<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 boolean，结果是这样的：

组件：

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>

ngFor中的Angular 4 toggle fontawesome按钮

3 个答案: