*ngFor 中单个项目的 (mouseenter) 事件 - angular 4

Question

所以我的目标是为单个 li 的子元素创建一个 mouseenter/mouseexit 事件。对于我的应用程序，当用户鼠标进入 li 元素时，它的子元素div class='thumbs'通过名为“hover”的组件布尔属性添加到 DOM -- *" ngIf='hover'"

我的问题是，当我鼠标悬停在单个 li 元素上时，会显示所有拇指图标，而不仅仅是单个 li 的拇指图标。

这是一个视频，突出了我的问题：

HTML：

<ul> <!-- Each song on the album -->
    <li class="song-block"
        *ngFor='let song of songsToDisplay'
        (click)="getSong(song)"
        (mouseenter)="hoverStateIn()"
        (mouseleave)="hoverStateOut()">
      <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="hover"> <!-- Thumbs section -->
          <i class="fa fa-thumbs-up"></i>
          <i class="fa fa-thumbs-down"></i>
        </div>.....
     </ul>

打字稿：

hover: boolean = false;

  hoverStateIn(){
    this.hover = true
  }

  hoverStateOut(){
    this.hover = false;
  }

Answer 1

您可以简单地将悬停布尔值设置为 *ngFor 的单个项目。

<ul>
  <!-- Each song on the album -->
  <li class="song-block"
      *ngFor='let song of songsToDisplay'
      (click)="getSong(song)"
      (mouseenter)="song.hover=true"
      (mouseleave)="song.hover=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.hover">
        <!-- Thumbs section -->
        <i class="fa fa-thumbs-up"></i>
        <i class="fa fa-thumbs-down"></i>
      </div>.....
</ul>