Question

所以我的目标是为单个li的子元素创建一个mouseenter / mouseexit事件。对于我的应用，当用户对鼠标元素进行鼠标操作时，它的子元素 div class =＆＃39; thumb＆＃39; 会添加到DOM中一个名为＆＃34; hover＆＃34;的组件布尔属性 - *＆＃34; ngIf =＆＃39; hover＆＃39;＆＃34;

我的问题是，当我在一个单独的li elememt上鼠标时，会显示所有的拇指图标，而不是仅仅是各个人的拇指图标。

这是一个高亮显示我的问题的视频：

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

（mouseenter）事件在* ngFor - angular 4中的单个项目上

3 个答案: