离子如何从阵列数据成像

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>

为了安全起见，您还应该放一个？在那里，但这只是我的头顶，我没有仔细检查过它：

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