web-dev-qa-db-fra.com

* ngSi la vérification est un tableau vide, puis afficher le message

J'ai utilisé le code suivant pour vérifier si le tableau est vide, puis afficher le message sinon afficher la liste. Mais cela montre seulement que la liste fonctionne."Aucun message"ne s'affiche pas. Quel est le problème ici?

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

parce que dans votre tableau 

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

vous êtes directement en train d'itérer et de vérifier la longueur d'un tableau dans ngFor, qui ne s'exécutera jamais. vous devez vérifier la longueur en dehors de ngFor ou avant d’itérer le tableau. vous pouvez aussi vérifier cela à partir du fichier ts, ou vous pouvez le gérer dans votre vue. 

Dans votre vue, vous pouvez gérer comme:

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

Dans le fichier .ts, vous pouvez également vérifier la longueur du tableau, créer une bascule variable et utiliser ngIf avec cette variable à la fois sur le div. 

6
Hrishikesh Kale

Vous le faites mal.

Voici quelques solutions suggérées:

  1. Essayez la nouvelle syntaxe 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>

    avec cela, vous pouvez conditionnellement afficher le ng-template.

  2. l'autre côté.

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

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

Vous vérifiez si globalArray est vide pendant que vous êtes à l'intérieur de la boucle. Il ne s'exécute pas à l'intérieur de la boucle si elle est vide. Placez la vérification à l'extérieur comme ceci:

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

La vérification du moment où globalArray n'est pas vide dans la boucle n'est pas nécessaire. Il ne sera pas itéré s'il n'y a pas de lignes à itérer.

0
jeanl