将鼠标悬停在某个项目上以显示特定于该项目的 div

Question

我用来*ngFor循环并显示deals数组中的项目

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

我想要实现的是，当我将鼠标悬停card在html中的div时，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;
}