web-dev-qa-db-fra.com

Erreur si ne vérifie pas si {{object.field}} existe

J'ai une question sur la vérification de l'existence d'un champ dans l'objet.

Je veux imprimer toutes les catégories que l'utilisateur a afin que je fasse quelque chose comme ceci:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li>
      {{category.name}}
    </li>
  </ul>

La raison? Toutes les données sont CORRECTEMENT imprimées, mais je reçois une erreur dans la console Web comme ceci:

Cannot read property 'name' of null

Mais quand je fais quelque chose comme:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li *ngIf="category">
      {{category.name}}
    </li>
  </ul>

Alors tout va bien.

Est-ce que je fais quelque chose de mal ou peut-être que je dois vérifier cela à chaque fois? Avez-vous déjà eu un problème comme celui-ci?

variablespropertiesnullangular
65
elzoy

utilisation de base

Utilisez l'opérateur de navigation sécurisée

_{{category?.name}}
_

alors name n'est lu que lorsque category n'est pas null.

tableau

Cela ne fonctionne que pour l'opérateur _._ (déréférencement). Pour un tableau, vous pouvez utiliser

_{{records && records[0]}}
_

Voir aussi angulaire 2 - impossible de lire la propriété '0' d'erreur non définie avec le contexte ERROR CONTEXT: [objet Objet]

pipe asynchrone

Avec le tuyau async, il peut être utilisé comme

_{{(chapters | async)?.length
_

ngModel

ngModel doit actuellement être divisé en

_[ngModel]="details?.firstname" (ngModelChange)="details.firstname = $event"
_

Voir aussi les données ne sont pas ajoutées au modèle dans angular2

*ngIf

Une alternative consiste toujours à encapsuler la partie de la vue avec _*ngIf="data"_ pour empêcher le rendu de la partie avant que le paramètre data ne soit disponible pour éviter l'erreur de déréférencement.

192
Günter Zöchbauer