如果不检查{{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>

那一切都好。

我是在做错什么，还是每次都要检查一下？您曾经遇到过这样的问题吗？

基本用法

使用安全导航操作员

{{category?.name}}

然后name只有在category没有时才被读取null。

数组

这仅适用于.（取消引用）运算符。对于数组，您可以使用

{{records && records[0]}}

另请参见Angular 2-无法使用上下文错误上下文读取未定义错误的属性“ 0”：[对象对象]

异步管道

带async管子可以像

{{(chapters | async)?.length

ngModel

随着ngModel目前需要将其拆分成

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

另请参见数据未追加到angular2中的模板

*ngIf

一种替代方法是始终使用来包装视图的一部分，*ngIf="data"以防止在data可用于防止解除引用错误之前完全渲染该部分。