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>