如果不检查{{ object.field }}是否存在,则出错

我有一个关于检查对象中是否存在某个字段的问题。

我想打印所有类别的用户,所以我这样做:

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

原因是什么? 所有的数据都是 好好的打印出来的,但是我在网络控制台中得到了一个错误,就像这样:

Cannot read property 'name' of null

但是当我这样做的时候:

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

那就没事了。

是我做错了什么,还是每次都要检查?你遇到过这样的问题吗?

77590 次浏览

基本用法

使用安全导航操作符

\{\{category?.name}}

那么只有当 category不是 null时才读取 name

数组

这只适用于 .(解引用)操作符。 对于数组,可以使用

\{\{records && records[0]}}

参见 角度2-无法读取属性与上下文未定义的错误错误: [对象对象]

异步管道

async管,它可以像

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

ngModel

对于 ngModel,目前需要将其拆分为

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

参见 数据没有附加到模板中的 angular2

*ngIf

另一种选择是始终用 *ngIf="data"包装视图的部分,以防止在 data可用之前完全呈现该部分,以防止出现解引用错误。