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

Question

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

我的问题是，当我将鼠标移到 indivual li 元素上时，会显示所有缩略图图标，而不仅仅是 individual 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>

Answer 2

有点晚了，希望有用。

使用模板引用变量是一种快速简单的方法。

<div #hoverField></div>

<li (mouseenter)="hoverField.style.display = 'block';
    (mouseleave)="hoverField.style.display = 'none';>
</li>

完整代码如下：

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

Answer 3

另一种选择是创建一个附加组件并通过属性绑定传入内容。然后您可以处理该组件中的 mouseenter 和 mouseleave 事件。我创建了一个快速 Stackblitz 来演示。在此示例中，我使用 css 悬停来突出显示所选歌曲：

https://stackblitz.com/edit/angular-w2svsv

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

(mouseenter) event on individual item in *ngFor - angular 4

angular

typescript

mouseevent

ngfor