ngДля использования индекса для определения элементов

Question

У меня есть следующие ngFor. Если изображение отсутствует (Http 404), я просто хочу скрыть элемент img. Проблема в том, что переменная imgMissing является глобальной для всех элементов. Мы могли бы легко решить это с помощью логики в файле компонента или путем указания отдельного файла компонента для части элемента.

Но можно ли разрешить это только внутри шаблона, например. используя индекс для идентификации недостающего элемента изображения?

<div *ngFor="let item of items; let i = index"> 
    <img *ngIf="!imgMissing" [src]="item.imgSrc" (error)="imgMissing=true;" /> 
</div> 

Answer 1

Просто используйте собственный обработчик onerror, чтобы установить стиль.

<div *ngFor="let item of items; let i = index"> 
 
    <img [src]="item.imgSrc" onerror="this.style.display='none'" /> 
 
</div>