Angular2 – 错误如果不检查是否存在{{object.field}}

我有一个关于检查对象中是否存在字段的问题。 我想打印所有类别的用户，所以我正在做这样的事情：

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

原因？ 所有的数据正确打印，但我在Web控制台中出现错误，如：

 Cannot read property 'name' of null 

但是当我做这样的事情时：

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

那么一切都好。 我做错了什么，或者我每次都要检查一下？ 你有过这样的问题吗？ 提前致谢。

Answer 1

基本用法

使用安全导航操作员

 {{category?.name}} 

那么name只在category不为null时被读取。

排列

这只适用于. （解除引用）操作员。 对于可以使用的数组

 {{records && records[0]}} 

另请参见Angular 2 – 无法通过上下文读取未定义错误的属性“0”ERROR CONTEXT：[object Object]

asynchronouspipe道

与asyncpipe道可以使用像

 {{(chapters | async)?.length 

ngModel

目前使用ngModel需要将其分解为

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

另请参见数据不在angular2中附加到模板

*ngIf

另一种方法是总是用*ngIf="data"来包装视图的一部分，以防止在data可用之前完全呈现该部分以防止解除引用错误。