*ngIf 检查数组为空，然后显示消息 [关闭]

Posted 2023-03-13

【中文标题】*ngIf 检查数组为空，然后显示消息 [关闭]

【英文标题】：*ngIf check is array empty then show message [closed]

【发布时间】：2018-08-16 08:50:01

【问题描述】：

我使用以下代码检查数组是否为空，然后显示消息，否则显示列表。但它只显示列表正在工作。 “无消息” 未显示。这里有什么问题？

<ion-row *ngFor="let item of globalArray">
    <div *ngIf="!globalArray?.length > 0">
        <p>No messages</p>
    </div>
    <div *ngIf="globalArray?.length > 0">
        <ion-item>
            item.message
        </ion-item>
    </div>
</ion-row>

【问题讨论】：

试试这个条件*ngIf = ' globalArray?.length == 0看看

【参考方案1】：

因为在你的数组中

<ion-row *ngFor="let item of globalArray">
    <div *ngIf="!globalArray?.length > 0">
        <p>No messages</p>
    </div>
    <div *ngIf="globalArray?.length > 0">
        <ion-item>
            item.message
        </ion-item>
    </div>
</ion-row>

您直接在 ngFor 中迭代并检查数组的长度，它永远不会执行。您需要在 ngFor 之外或迭代数组之前检查长度。你也可以从 ts 文件中检查这个，或者你可以在你的视图中处理这个。

在您看来，您可以像这样处理：

<div *ngIf="!globalArray || globalArray.length === 0">
        <p>No messages</p>
    </div>
<div *ngIf="globalArray || globalArray.length > 0">
<ion-row *ngFor="let item of globalArray">
        <ion-item>
            item.message
        </ion-item>
    </ion-row>
</div>

在 .ts 文件中，您可以类似地检查数组长度并在此基础上进行变量切换，并在两个 Div 上使用带有该变量的 ngIf。

【参考方案2】：

你做错了。

以下是一些建议的解决方案：

尝试新的ngIfElse 语法：

<div *ngIf="globalArray && globalArray.length >0 then showData else hideData">
<ng-template #showData>Show Data</ng-template>
<ng-template #hideData>Hide Data</ng-template>

这样，您可以有条件地显示ng-template。

反之。

<div *ngIf="globalArray && globalArray.length >0">Show Data</div>

<div *ngIf="globalArray == undefined || globalArray.length == 0">Hide Data</div>

【参考方案3】：

当您在循环中时，您正在检查 globalArray 是否为空。如果它为空，它不会在循环内执行。像这样将检查放在外面：

    <div *ngIf="!globalArray || globalArray.length === 0">
        <p>No messages</p>
    </div>
    <ion-row *ngFor="let item of globalArray">
        <ion-item>
            item.message
        </ion-item>
    </ion-row>

不需要在循环内检查 globalArray 何时不为空。如果没有要迭代的行，它将不会迭代。