Question

我使用ngFor有以下元素

<span *ngFor="let picture of pictures; let i = index">
    <a target="_blank" href="{{picture.image}}" class="thumbnail-display image-overlay">
        <span class="overlay-icon hide">
            <i class="fa fa-file-image-o image-preview" [attr.data-url]="picture.image" aria-hidden="true"></i>
            <i class="fa fa-trash-o image-del" aria-hidden="true" data-params="{&quot;id&quot;:&quot;101&quot;, &quot;type&quot;:&quot;venue&quot;}" data-url="#"></i>
        </span>
        <img src="{{picture.thumb}}">
    </a>
</span>

我想在鼠标进入事件中删除hide中的<span class="overlay-icon hide">类，并在鼠标离开事件中添加回hide类。

我尝试了以下

<span [ngClass]="class[i]" (mouseover)="class[i]='overlay-icon'" (mouseout)="class[i]='overlay-icon hide'">

它不起作用，并引发以下错误。

ERROR TypeError: Cannot read property '0' of undefined

有人可以指出我该怎么做吗？

谢谢。

Answer 1

也许只需要记住悬停跨度的索引就可以不用数组：

<a (mouseover)="hoverIdx = i" (mouseout)="hoverIdx = -1">
    <span [ngClass]="{ 'overlay-icon': true, 'hide': hoverIdx !== i }">
    </span>
</a>

这样，您只需要将变量hoverIdx初始化为-1，就不会遇到数组索引问题。另外，您不必创建适当长度的数组并将其初始化。

为避免任何闪烁问题，请将悬停处理程序放置在父元素上，因为孩子会被打开/关闭。

这里是Stackblitz demo

在ngFor中的鼠标输入/鼠标离开上切换类

1 个答案: