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

Question

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

我想打印用户拥有的所有类别，所以我正在做这样的事情：

  <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}}

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

数组

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

{{records && records[0]}}

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

异步管道

async 管道可以像这样使用

{{(chapters | async)?.length

ngModel

ngModel 目前需要拆分成

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

另见Data is not appending to template in angular2

*ngIf

另一种方法是始终使用*ngIf="data" 包裹视图的一部分，以防止在data 可用以防止取消引用错误之前呈现该部分。