web-dev-qa-db-fra.com

ng-if vérifie si le tableau est vide

L'API avec laquelle je travaille renvoie ceci s'il n'y a aucun élément dans le tableau

items: []

S'il y a des éléments dans le tableau, il retourne quelque chose comme

items: [
  {
    name: 'Bla'
  }
]

Dans mon modèle, je pense que je dois utiliser ng-if pour afficher/masquer un élément en fonction de la présence ou non de données.

<p ng-if="post.capabilities.items"><strong>Topics</strong>: <span ng-repeat="topic in post.capabilities.items">{{topic.name}}</p>

Cependant, je pourrais être totalement en dehors de la base, car c’est la première fois que je travaille dans Angular et il existe peut-être une bien meilleure façon de faire ce que j’essaie de faire.

javascriptarraysangularjs
46
TheEks

post.capabilities.items sera toujours défini car il s'agit d'un tableau vide. Si vous cochez post.capabilities.items.length, il devrait fonctionner correctement car 0 est faux.

79
Martijn Welker

Vérifiez que la propriété length du tableau est supérieure à 0:

<p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

Les tableaux (objets) en JavaScript sont des valeurs de vérité. Par conséquent, votre vérification initiale <p ng-if="post.capabilities.items"> est toujours évaluée à true, même si le tableau est vide.

35
Dmitri Pavlutin

Pour résoudre le problème null/undefined, essayez d'utiliser l'opérateur ? pour vérifier l'existence:

<p ng-if="post?.capabilities?.items?.length > 0">

  • Si quelqu'un arrive sur cette page à la recherche d'une réponse Ionic Framework , assurez-vous d'utiliser *ngIf:

    <p *ngIf="post?.capabilities?.items?.length > 0">
15
Grant