*ngFor 中单个项目的 (mouseenter) 事件 - angular 4
(mouseenter) event on individual item in *ngFor - angular 4
所以我的目标是为 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;
}
您可以简单地将悬停布尔值设置为 *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>
有点晚了,希望有用。
使用模板引用变量是一种快速简单的方法。
<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>
另一种选择是创建一个附加组件并通过 属性 绑定传入内容。然后您可以处理该组件中的 mouseenter 和 mouseleave 事件。我创建了一个快速 Stackblitz 来演示。在此示例中,我使用 css 悬停来突出显示所选歌曲:
所以我的目标是为 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;
}
您可以简单地将悬停布尔值设置为 *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>
有点晚了,希望有用。
使用模板引用变量是一种快速简单的方法。
<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>
另一种选择是创建一个附加组件并通过 属性 绑定传入内容。然后您可以处理该组件中的 mouseenter 和 mouseleave 事件。我创建了一个快速 Stackblitz 来演示。在此示例中,我使用 css 悬停来突出显示所选歌曲: