Question

我正在使用Angular4应用程序，在此我希望根据API响应显示图像如下

在我的应用程序中，当用户点击产品名称传递给API时，API将返回与产品相关的图像。

在产品详细信息页面中，我展示的产品就像用户悬停在小图片上一样，它会显示大尺寸图片。

我想要做的是如果API返回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>

如何在Angular4中基于API响应生成图像标记

1 个答案: