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

Question

我使用以下代码检查数组是否为空,然后显示消息,否则显示列表.但它只显示列表正在运行."无消息"未显示.这有什么不对？

<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

你这样做是错误的。

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

1. 尝试新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.

2. 另一种方法。

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