Question

我有一个列表名“ day”。

export class Day{
    id:number;
    name: string;
    items: Object;
}

我想在项目为空时显示“ Hello”。我尝试使用* ngIf，但是它不起作用。这是我的代码。

<div class=" list" *ngFor="let day of days">
    <div class="list-name">
        <strong>
            {{day.name}}
        </strong>
        <div *ngIf= "day.items === 0">
            Hello
        </div>
    </div>
    <div *ngFor="let item of day.items">
        <div class="column" [style.background-image]="'url(' + item.photoPath + ')'">
            <h4 class="item-name">{{item.name}}</h4>
        </div>
    </div>
</div>

Answer 1

我似乎项目不是数组。它是一个对象。在对象上使用ngFor会重新出现错误。

第二，您应该在数组上使用.length来获取对象数。所以应该是

<div *ngIf= "day?.items?.length === 0">

Answer 2

您必须使用长度来检查数组大小

<div *ngIf= "day.items?.length === 0">

Answer 3

尝试一下

<div *ngIf= "day.items.length === 0">

Answer 4

您可以使用<div *ngIf= "day.items == null || day.items.length === 0">来检查项目是否为空或空。

演示https://stackblitz.com/edit/angular-scssrw

Answer 5

您可以简单地在插值中使用条件语句表达式，而无需使用“ ngIf”。

...
<strong>
   {{ (day.item && day.item?.length) ? day.name : day.name + 'Hello' }}
</strong>
...

ngIf检查对象是否为空[完成]

5 个答案: