Angular 4切换fontawesome按钮内ng对于

我意识到这可能是 this或this的副本，但我已经对此失明。我从一个休息API获取我的数据作为一个对象，其中包含票数。切换功能适用于所有fontawesome图标，而不仅仅是特定的，即使计数器工作正常。我想要填充的心脏图标在特定的故事上切换，当图标被按下时。当它再次被按下时反之亦然。Angular 4切换fontawesome按钮内ng对于

我使用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>

来源

2017-10-19 byblix

你能解释一下确切的问题是什么吗？ –

是的，当图标被按下时，我想让填充的心脏图标在特定故事上切换。当它再次被按下时反之亦然。 'this.liked = true'或false – byblix

问题是，它切换页面上的每一个图标 – byblix

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 
    }

来源

2017-10-19 13:30:35 DGarvanski

谢谢，这与API数据一起工作！标记为已回答。 – byblix

你为什么不使用ngClass（且只有一个图标标签）而不是此ngIf来切换FAS /远课？

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

来源

2017-10-19 13:24:06

+1虽然它没有真正回答他们的问题，但他们可能仍然需要使用'story.liked'，如上所示。 – Duncan

所以我用我的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>

来源

2017-10-19 13:37:53 byblix

Angular 4切换fontawesome按钮内ng对于

回答

相关问题