关于变量：如果不检查{{object.field}}是否存在，则会出错


Error if don't check if {{object.field}} exists

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

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

1
2
3
4
5
6
7
8
9
10
  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
   
<li>

      {{category.name}}
   
</li>

 
</ul>

原因？ 所有数据都是正确打印的，但我在Web控制台中遇到如下错误：

1
Cannot read property 'name' of null

但当我做类似的事情时：

1
2
3
4
5
6
7
8
  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li *ngIf="category">
      {{category.name}}
   
</li>

 
</ul>

那一切都没问题。

我做错了什么或者我每次都要检查一下吗？ 你有过这样的问题吗？

基本用法

使用安全导航操作员

1
{{category?.name}}

然后仅当category不是null时才读取name。

排列

这仅适用于.(取消引用)运算符。
对于您可以使用的阵列

1
{{records && records[0]}}

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

异步管道

使用async管道，它可以像

1
{{(chapters | async)?.length

ngModel

目前，ngModel需要拆分为

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

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

*ngIf

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

相关讨论