竖起大拇指/拇指向下* ngIf

Question

所以我有一个* ngFor歌曲列表。我想让用户点击一个拇指，然后为那个拇指突出显示，然后根据该点击事件设置一个原因是该歌是竖起大拇指还是大拇指向下。当clicked属性为true时，我希望拇指变成蓝色。

这就是它的样子：

打字稿：

  thumbsVisible: boolean = false;
  thumb: string = ""

click(song){
 console.log("Thumb is: " + song.thumb)
}

HTML：

<ul> <!-- Each song on the album -->
<li class="song-block"
    *ngFor='let song of songsToDisplay'
    (click)="getSong(song)"
    (mouseenter)="song.thumbsVisible=true"
    (mouseleave)="song.thumbsVisible=false">
  <div class="song-card"
       (click)="addPlay(song)">
    <p *ngIf="!song.isPlaying"
        class="song-number">{{song.tracknumber}}</p>
    <i *ngIf="song.isPlaying" class="fa fa-play"></i>
    <p class="song-name">{{song.name}}</p>
    <p class="song-length">{{song.length}}</p>
    <div class="thumbs"
         *ngIf="song.thumbsVisible"> <!-- Thumbs section -->
      <i class="fa fa-thumbs-up fa-lg"
         (click)="song.thumb='up'"
         (click)="click(song)"></i>
      <i class="fa fa-thumbs-down fa-lg"
         (click)="song.thumb='down'"
         (click)="click(song)"></i>
    </div> ... 
</ul>

Answer 1

好的我觉得我遇到了你的问题。您必须根据属性是true还是false来添加/删除类。您可以为每首歌曲设置此属性，如下所示：

HTML：

<i class="fa fa-thumbs-down fa-lg" [class.thumbDown]="song.thumb" (click)="click(song, "down")"></i>
<i class="fa fa-thumbs-up fa-lg" [class.thumbUp]="!song.thumb" (click)="click(song, "up")"></i>

打字稿

//Typescript
click(song, thumb) {
  if(thumb = "up") {
    //Set song.thumb = true;
  } 
  if(thumb = "down") {
    //Set song.thumb = false;
  }
}

CSS

.thumbUp{
  //Style if thumb is up
}
.thumbDown{
  //Style if thumb is down
}