web-dev-qa-db-ja.com

* ngIf配列が空の場合、メッセージを表示

次のコードを使用して、配列が空かどうかを確認し、メッセージを表示するか、リストを表示します。しかし、それはリストが機能していることを示しているだけです。 "メッセージなし"は表示されません。ここで何が問題になっていますか？

<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>
angulartypescriptionic3
5
GunarathneMDD

あなたの配列で

<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を使用できます。

14
Hrishikesh Kale

あなたはそれを間違った方法で行っています。

ここにいくつかの提案された解決策があります：

  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>
2
Rohan Sampat

ループの内側にいる間、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が空でない場合のチェックは不要です。反復する行がない場合は反復しません。

0
jeanl