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

【问题标题】：Apply class to specific element inside ngFor将类应用于 ngFor 中的特定元素
【发布时间】：2020-01-24 00:36:42
【问题描述】：

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

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

<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>

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

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

【问题讨论】：

标签： html css angular ngfor

【解决方案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 以获取演示。

【讨论】：

@infodev - 这些建议之一对你有用吗？