时间戳

首页 > 解决方案 > 离子如何从数组数据中成像

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

问题描述

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

像这样的例子

{
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]

标签： ionic4

解决方案

那[行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>

我认为为了安全起见，您还应该放一个 ? 在那里，但这只是我的想法，我没有仔细检查它：

<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>

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

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

推荐阅读