悬停一个项目以显示特定于它的div

Question

我正在使用*ngFor循环显示deals数组中的项目

   <div class="card item" *ngFor="let deal of deals; let i = index">
      <div class="card-body item-body">...</div>
    </div>

我要实现的是，当我在html中将div card悬停时，将显示其对应的card-body div。 使用jQuery，这是一项相当简单的任务，但使用Angular，我却做不到。

我为此寻找了解决方案，但没有成功实现。 实现该目标的方法是什么？

Answer 1

您可以尝试类似的事情

  <div class="card item" *ngFor="let deal of deals; let i = index">
      <div  (mouseenter) ="onHover(i)"  (mouseleave) ="onHover(-1)>
       <div *ngIf = "i == hoverIndex" class="card-body item-body">...</div>
      </div >
    </div>

在您的.ts文件中

hoverIndex:number = -1;

和方法

onHover(i:number){
 this.hoverIndex = i;
}