如何在Angular4中基於API響應生成圖像標簽

Question

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

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

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

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

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

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

Answer 1

您可以使用* ngFor指令顯示圖像。 然后，您可以動態顯示圖像，而不管從該服務獲得的圖像數量如何。

<div class="row" *ngIf="smallImages">
     <ng-container *ngFor="let image of images">
       <img (mouseenter)="mouseEnter($event)"  [src]="image.src" 
        class="img-thumbnail">
     </ng-container>
</div>