Переключить класс при помощи мыши-ввода / мыши-выхода в ngFor

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