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>