如何在Angular 4中禁用圖像標簽

Question

我正在Angular4應用程序中工作，在此我想顯示基於API響應的圖像，如下所示

在我的應用程序中，當用戶單擊將產品名稱傳遞給API的產品時，API將返回與該產品相關的圖像。

在產品詳細信息頁面上，我將產品像用戶懸停一樣顯示在小圖像上，它將顯示大尺寸圖像。

這是我的HTML。

<div class="col-sm-5">
  <div class="container" >
    <img [src]="i_path"  id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="error">
  </div>
    <div>
    <div class="row">

          <img *ngIf="smallImages['0']['small_Images']" id="sm001" (mouseenter)="mouseEnter($event)"  src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" [attr.ref]="bigImages['0']['big_Images']">
          <img *ngIf="smallImages['1']['small_Images']" id="sm005" (mouseenter)="mouseEnter($event)"  src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" [attr.ref]="bigImages['1']['big_Images']">
          <img *ngIf="smallImages['2']['small_Images']" id="sm002" (mouseenter)="mouseEnter($event)"  src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" [attr.ref]="bigImages['2']['big_Images']">
          <img *ngIf="smallImages['3']['small_Images']" id="sm003" (mouseenter)="mouseEnter($event)"  src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" [attr.ref]="bigImages['3']['big_Images']">
          <img *ngIf="smallImages['4']['small_Images']" id="sm004" (mouseenter)="mouseEnter($event)"  src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" [attr.ref]="bigImages['4']['big_Images']">
      </div>

我想做的是，如果API返回3張圖像的圖像路徑意味着我只想顯示3張圖像（圖像標簽）。如果API返回5條路徑，那么我想顯示5張圖像。此過程基於API響應是動態的圖片數量。

只需當Image src標簽未獲取路徑時，我想禁用該img標簽。

現在我有5個靜態圖像標簽，我在其中傳遞了API響應，它顯示圖像，如果API返回4個圖像路徑，則它顯示4個圖像和1個alt標簽。

我想使其成為動態過程...

謝謝 ...

Answer 1

代替*ngIf ，在smallImages數組上使用*ngFor ：

 <div class="row"> <img *ngFor="let smallImage of smallImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="smallImage['small_Images']" [alt]="'img' + i" class="img-thumbnail" [attr.ref]="bigImages[i]['big_Images']"> </div>