如何在Angular4中使用img标记迭代json数据

Question

我正在尝试从api响应中绑定img url。在这里，我附上了迄今为止我尝试过的内容。

Json数据结构：

这是我从API

收到的数据结构

MY-cart.component.ts

 this.CartdataService.get_Product_Details(this.productCode).subscribe(
    data => {
      this.productDetails = data;
      this.productImages = this.productDetails['0']['PROD_B']
      console.log(this.productImages);
    });

在控制台中接收数据数组

这里的控制台我得到了一个数组中的图片网址。

HTML代码

<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="images['PRODUCT_THUMBNAIL']"
              [alt]="'img' + i" class="img-thumbnail" [attr.ref]="images[i]['PRODUCT_IMAGE']">

这就是我尝试从响应中绑定图像网址的方法，但我没有得到图像。

任何人都可以指导我解决这个问题。

Answer 1

他们分配图像的方式是错误的。

尝试

  this.productImages = this.productDetails[0]['PROD_B'].

并在下面进行更改

  <div  *ngFor="let images of productImages; let i = index" >
        <img (mouseenter)="mouseEnter($event)" 
                  [src]="images['PRODUCT_THUMBNAIL']"
                  [alt]="'img' + i" class="img-thumbnail" 
                  [attr.ref]="images['PRODUCT_IMAGE']">
</div>

Answer 2

我认为，你错过了实际路径上的单引号..（将URL绑定为字符串但不是表达式..）试试这个：

<img *ngFor="let images of productImages; let i = index" (mouseenter)="mouseEnter($event)" [src]="'images["PRODUCT_THUMBNAIL"]'"
          [alt]="'img' + i" class="img-thumbnail" [attr.ref]="'images[i]["PRODUCT_IMAGE"]'">