*ngIf vérifier le tableau est vide, alors afficher le message

J'ai utilisé le code suivant pour vérifier si le tableau est vide alors afficher un message d'autre afficher la liste. Mais il n'affiche que la liste est de travail. "Pas de messages" 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>
  • Essayez cette condition *ngIf = ' globalArray?.length == 0 et voir
InformationsquelleAutor GunarathneMDD | 2018-03-08
  1. 13

    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 de l'itération et de la vérification de la longueur d'un tableau à l'intérieur ngFor, qui ne sera jamais exécuter. vous devez vérifier la longueur à l'extérieur ngFor ou avant l'itération de la matrice. vous pouvez le vérifier à partir des fichiers ts en trop, ou vous pouvez les traiter dans votre point de vue.

    Dans votre vue, vous pouvez les manipuler 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 et faire une variable bascule sur la base du présent et de l'utilisation ngIf avec cette variable sur les deux Div.

    InformationsquelleAutor Hrishikesh Kale
  2. 1

    Que vous faites de la mauvaise façon.

    Voici quelques solutions proposées:

    1. Essayer la nouvelle ngIfElse syntaxe:

      <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 montrer la ng-template.

    2. dans l'autre sens.

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

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

    Vous de vérifier si globalArray est vide alors que vous êtes à l'intérieur de la boucle. Il ne les exécute pas à l'intérieur de la boucle si elle est vide. Place de 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 pour quand globalArray n'est pas vide à l'intérieur de la boucle n'est pas nécessaire. Il ne sera pas itérer si il n'y a pas de lignes à itérer.

    InformationsquelleAutor jeanl