variables - pasar - paso de parametros entre componentes angular 2

Error si no comprueba si existe{{object.field}}

Question

Tengo una pregunta sobre cómo verificar si existe algún campo en el objeto.

Quiero imprimir todas las categorías que tiene el usuario, así que estoy haciendo algo como esto:

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

¿La razón? Todos los datos se imprimen CORRECTAMENTE , pero recibo un error en la consola web como este:

Cannot read property ''name'' of null

Pero cuando hago algo como:

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

Entonces todo está bien.

¿Estoy haciendo algo mal o tal vez tengo que verificar esto cada vez? ¿Alguna vez has tenido un problema como este?

Answer 1

uso básico

Use el operador de navegación segura

{{category?.name}}

entonces el name solo se lee cuando la category no es null .

formación

Esto solo funciona para el . operador (desreferencia). Para una matriz puedes usar

{{records && records[0]}}

Consulte también Angular 2: no se puede leer la propiedad ''0'' de error indefinido con contexto CONTEXTO DE ERROR: [objeto Objeto]

tubería asíncrona

Con tubería async se puede usar como

{{(chapters | async)?.length

ngModel

Con ngModel actualmente necesita dividirse en

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

Consulte también Los datos no se agregan a la plantilla en angular2

*ngIf

Una alternativa es siempre ajustar la parte de la vista con *ngIf="data" para evitar que la parte se represente antes de que los data estén disponibles para evitar el error de desreferencia.