Angular2 - error if don't check if {{object.fi

问题:

I have a question about checking if some field in object exists. I want to print all categories which user has so I\'m doing something like this:

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

The reason? All the data are PROPERLY printed but I\'m getting an error in web console like:

Cannot read property \'name\' of null

But when I do something like:

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

Then all is okay. Am I doing something wrong or maybe I have to check this every time? Have you ever a problem like this one? Thanks in advance.

回答1:

basic usage

Use the safe-navigation operator

{{category?.name}}

then name is only read when category is not null.

array

This only works for the . (dereference) operator. For an array you can use

{{records && records[0]}}

See also Angular 2 - Cannot read property '0' of undefined error with context ERROR CONTEXT: [object Object]

async pipe

With async pipe it can be used like

{{(chapters | async)?.length

ngModel

With ngModel currently it needs to be split into

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

See also Data is not appending to template in angular2

*ngIf

An alternative is always to wrap the part of the view with *ngIf=\"data\" to prevent the part being rendered at all before the data is available to prevent the dereference error.