在一个 .Json 对象

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.image"时，我只能成功显示一个图像，但当我尝试使用"productDetails.images"时则不能。

我明白这个：

移动模拟器屏幕截图

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

Answer 1

很好，因为productDetails.images是一个数组，因此当您使用它时，您不会返回指向图像的链接，而是链接数组本身，因此，如果您使用productDetails.images[0]，那么您将拥有第一张图像等

Answer 2

如果要显示产品详细信息中的所有图像，则需要使用以下修改后的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>