离子如何从数组数据中成像

Question

我需要显示数组中的图像。而且数组已经在数组中了。

这样的例子

{
title:xyz
attachments: [
{
image:'xyz.com'
}]}

我是这样显示的，但是图片没有显示，只有标题显示

    <ion-card *ngFor="let x of art">
        <img  [src]="x.attachments.url || '/assets/shapes.svg'" class="image"/>
        <div style="text-align: right;">{{x.title}}</div>

    </ion-card>

但它没有显示图像它显示交叉相机的意外图像

[![在此处输入图片描述][2]][2]

Answer 1

attachments 行上的 [ 表示它是一个对象数组。

您需要像这样访问 [0]：

<ion-card *ngFor="let x of art">
    <img  [src]="x.attachments[0].url || '/assets/shapes.svg'" class="image"/>
    <div style="text-align: right;">{{x.title}}</div>
</ion-card>

我认为为了安全起见你还应该放一个 ?在那里，但这只是我的头脑，我没有 double-checked 它：

<ion-card *ngFor="let x of art">
    <img  [src]="x.attachments[0]?.url || '/assets/shapes.svg'" class="image"/>
    <div style="text-align: right;">{{x.title}}</div>
</ion-card>

基本上，如果我的语法正确，那么如果该 Art 项目中没有附件，它就不会显示错误。

如果您想进一步研究它，它被称为 "Angular Safe Navigation Operator"。

离子如何从数组数据中成像

Ionic how to image from data of array

ionic4