大拇指向上 / 大拇指向下 *ngIf答案

【问题标题】：Thumbs Up / Thumbs Down *ngIf大拇指向上 / 大拇指向下 *ngIf
【发布时间】：2018-03-07 07:52:48
【问题描述】：

所以我有一个 *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>

【问题讨论】：

你不能像[class.song-playing]="true"或[ngClass]这样使用吗？
你的问题是什么？ gif非常小。你应该只使用一个(click)=click(song)，在这个函数中你可以设置song.thumb="up/down"
@Edric 我可以使用 [ngClass]，但我不知道如何使其动态化。我正在尝试类似 (click) = "[ngClass]='''selected'" 之类的东西，但这不起作用啊
@ochs.tobi 我的问题是编程这个应用程序的大拇指/大拇指向下功能。当我单击每个图标时，我无法弄清楚如何添加一个类，然后我必须在每首歌曲是竖起大拇指还是竖起大拇指之间切换
您可以使用此[class.active]="myProperty" 将课程设置为活动。这将在属性返回 true 时添加“活动”类。

标签： angular click angular-ng-if

【解决方案1】：

好的，我想我有你的问题。您必须根据属性是真还是假来添加/删除类。您可以像这样为每首歌曲设置此属性：

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
}

【讨论】：