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个图像的图像路径意味着我只想显示三个图像（图像标记）。如果API返回5个路径，那么我想显示5个图像。这个过程是动态的基于图像的API响应计数。

简单地当Image src标记未获取我想要禁用该img标记的路径时。

现在我有5个静态图片标签，我在其中传递了它显示图像的API响应，如果API返回4个图像路径，则显示4个图像和1个alt标记。

我想让它成为动态过程...

谢谢...

Answer 1

而不是*ngIf，在*ngFor数组上使用smallImages：

＆＃13;

<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>

＆＃13;

如何在Angular 4

1 个答案: