ngFor中的Angular 4切换字体很棒的按钮答案

【问题标题】：Angular 4 toggle fontawesome button inside ngForngFor中的Angular 4切换字体很棒的按钮
【发布时间】：2017-10-19 13:06:02
【问题描述】：

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

我正在使用 angular4 和 fontawesome 5。

数据来自我的服务中的一个 observable。

组件：

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>

【问题讨论】：

你能解释一下具体的问题是什么吗？
是的，我希望在按下图标时在特定故事上切换填充的心形图标。再次按下时反之亦然。 this.liked = true 或假
问题是，它会切换页面上的每个图标
我添加了图片
这些不同的类 'far' 和 'fas' 不应该像 'fa fa-heart' 和 'fa fa-heart-o' 吗？

标签： html angular api typescript

【解决方案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
  }

【讨论】：

谢谢您，这适用于 API 数据！标记为已回答。

【解决方案2】：

你为什么不使用ngClass（只有一个图标标签）而不是这个 ngIf 来切换 fas/far 类？

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

【讨论】：

+1 提出了明显的建议，尽管它实际上并没有回答他们的问题，但他们可能仍然需要使用story.liked，如上所述。

【解决方案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>

【讨论】：