Question

我有一个生成名称+图标的循环。

我希望该图标仅在悬停时显示。

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
    <mat-card (mouseover)="hover=true" (mouseleave)="hover=false">{{element}}
        <mat-icon [ngClass]="hover?'show-icon':'hide-icon'" ng aria-hidden="false" aria-label="Example home icon">add</mat-icon>
    </mat-card>

</div>

实际上，当我将鼠标悬停在一个元素上时，该图标就会在所有卡片列表中可见。

我希望图标仅显示在悬停的元素上

Answer 1

在您的原始代码中，相同的条件适用于所有图标的类绑定。这就是为什么它们都同时更改的原因。

您可以在组件类中定义一个hoverElement属性。它将在mouseover上设置为悬停元素，并在mouseleave上重置。类绑定条件将检查element变量是否对应于hoverElement：

<div class="elm" *ngFor="let element of callWorkflowData?.jobsList">
  <mat-card (mouseover)="hoverElement = element" (mouseleave)="hoverElement = null">{{element}}
    <mat-icon [ngClass]="hoverElement === element ? 'show-icon' : 'hide-icon'" ...>add</mat-icon>
  </mat-card>
</div>

有关演示，请参见this stackblitz。

请注意，仅CSS和:hover选择器可以达到相同的结果：

mat-card mat-icon {
  color: orange;
}

mat-card:hover mat-icon {
  font-weight: bold;
  color: darkgreen;
}

有关演示，请参见this stackblitz。

将类应用于ngFor中的特定元素

1 个答案: