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

我有以下使用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"> 在鼠标上输入事件,然后添加回 隐藏 类的鼠标离开事件。

我尝试了以下方法

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

它不工作,并抛出以下错误。

ERROR TypeError: Cannot read property '0' of undefined

有人能告诉我怎么做吗?

非常感谢。