html - 如何在 Angular4 中使用 img 标签迭代 json 数据

Question

我正在尝试绑定(bind)来自 api 响应的 img url。在这里，我附上了到目前为止我尝试过的内容。

Json数据结构:

这是我从API接收到的数据结构

我的购物车.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);
    });

在控制台接收数据数组

在这里控制台我得到了一个数组中的图像 url。

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']">

这就是我尝试从响应中绑定(bind)图像 url 的方式，但我没有得到图像。

谁能指导我解决这个问题。

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>