Question

我使用以下代码检查数组是否为空，然后显示消息，否则显示列表。但它只显示列表正在运行。 ＆＃34;没有消息＆＃34; 未显示。这里有什么问题？

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

Answer 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和该变量。

Answer 2

你这样做是错误的。

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

尝试新的all语法：
```
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
```

Answer 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何时为空。如果没有要迭代的行，它将不会迭代。

* ngIf check是数组为空然后显示消息

3 个答案: