web-dev-qa-db-fra.com

Comment vérifier un objet vide dans un modèle angulaire 2 en utilisant * ngIf

Je veux vérifier si mon objet est vide ne rend pas mon élément, et voici mon code:

<div class="comeBack_up" *ngIf="previous_info != {}">
   <a 
      [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
      >
        {{previous_info.title}}
   </a>
</div>

mais mon code est faux, quel est le meilleur moyen de le faire?

javascripttypescriptangular
29
Alireza Valizade

Cela devrait faire ce que vous voulez:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

ou plus court

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

Chaque {} crée une nouvelle instance et la comparaison avec ==== de différentes instances d'objets a toujours pour résultat false. Quand ils sont convertis en chaînes === résultats en true

exemple Plunker

68
Günter Zöchbauer

Vous pouvez aussi utiliser quelque chose comme ça:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

avec la méthode isEmptyObject définie dans votre composant:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}
26
Thierry Templier

Les réponses ci-dessus sont d'accord. Mais j’ai trouvé une très bonne option à utiliser dans la vue:

{{previous_info? .title}}

question probablement dupliquée Angular2 - erreur si ne vérifie pas si {{object.field}} existe

10
Damiani

Cela a fonctionné pour moi:

Vérifiez la propriété length et utilisez ? pour éviter les erreurs undefined.

Donc, votre exemple serait:

<div class="comeBack_up" *ngIf="previous_info?.length">

METTRE &AGRAVE; JOUR

La propriété de longueur n'existe que sur les tableaux. Puisque la question portait sur les objets, utilisez Object.getOwnPropertyNames(obj) pour obtenir un tableau de propriétés à partir de l'objet. L'exemple devient:

<div class="comeBack_up" *ngIf="previous_info  && Object.getOwnPropertyNames(previous_info).length > 0">

Le previous_info && est ajouté pour vérifier si l'objet existe. Si sa valeur est true, l'instruction suivante vérifie si l'objet a au moins une propriété. Il ne vérifie pas si la propriété a une valeur.

3
Loke

Un peu plus long (si cela vous intéresse):

Dans votre code TypeScript, procédez comme suit:

this.objectLength = Object.keys (this.previous_info) .length! = 0;

Ensuite, dans le fichier HTML, vérifiez:

* ngIf = "objectLength! = 0

0
Mukul_Vashistha

Juste pour des raisons de lisibilité, la bibliothèque créée ngx-if-empty-or-has-items vérifie si un objet, un ensemble, une carte ou un tableau n'est pas vide. Cela aidera peut-être quelqu'un. Il a les mêmes fonctionnalités que ngIf (la syntaxe est alors prise en charge, sinon, et "as").

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>
0
alexKhymenko