Как перебрать данные json с тегом img в Angular4

Question

Я пытаюсь связать img url с ответом API. Здесь я приложил то, что я пробовал до сих пор.

Структура данных Json:

Это структура данных, которые я получил от API

мой-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);
    });

Получение массива данных в консоли

Здесь консоль Я получил 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']">

Вот как я пытаюсь привязать URL-адрес изображения из ответа, но я не получил изображение.

Может ли кто-нибудь помочь мне решить эту проблему.

Answer 1

Я думаю, вам не хватает ни одной кавычки по фактическому пути .. (привязка 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"]'">

Answer 2

то, как вы назначаете изображения, неверны.

Попробуйте с

  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>