Question

我正在使用Ionic 3构建移动应用，并且试图使用阵列在一张离子卡中显示一些图像。

HTML：

<ion-card>
    <img [src]="productDetails.images"/>
    <ion-card-header>
      Description
    </ion-card-header>
    <ion-card-content>
      {{productDetails.description}}
    </ion-card-content>
</ion-card>

JSON文件：

[
  {
    "id": "1",
    "name": "Oreo",
    "description": "Our pre-shrunk organic cotton t-shirt, with its slightly fitted waist and elegant V-neck is designed to flatter. Youll want one in every color!",
    "price": "520.00",
    "image": "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg",
    "images": [
      "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg", 
      "https://podcollective.com/wp-content/uploads/2016/07/Love-is-a-Cosmic-Force-Alex-Grey.jpg"
    ],
    "bestSeller": true,
  }
]

使用“ productDetails.images”时，我只能成功显示一个图像，而尝试使用“ productDetails.images”时，则不能成功显示。

我明白了：

Mobile Emulator Screenshot

我的问题是，是否可以同时显示两个图像？还是唯一的选择是创建更多对象值并手动显示它们？

Answer 1

好吧，因为productDetails.images是一个数组，因此，当您使用它时，您没有返回到图像的链接，而是链接了数组本身，因此，如果您要使用productDetails.images [0]，那么您会有第一张图片，等等

Answer 2

如果要显示productDetails中的所有图像，则需要使用以下修改的HTML代码：

<ion-card>
  <div *ngFor="let productImage of productDetails[0].images let i = index" >
     <img [src]="productImage" />
  </div>
  <ion-card-header>
     Description
  </ion-card-header>
  <ion-card-content>
     {{productDetails.description}}
  </ion-card-content>
</ion-card>

在一个.Json对象中添加两个图像

2 个答案: