web-dev-qa-db-ja.com

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

その後、すべて大丈夫です。

私は何か間違ったことをしていますか、それとも毎回これを確認する必要がありますか？このような問題を抱えたことはありますか？

variablespropertiesnullangular
65
elzoy

基本的な使用法

安全なナビゲーション演算子を使用する

{{category?.name}}

nameは、categoryがnullでない場合にのみ読み取られます。

array

これは.（参照解除）演算子に対してのみ機能します。配列には次を使用できます

{{records && records[0]}}

参照： Angular 2-コンテキストERROR CONTEXTで未定義エラーのプロパティ '0'を読み取れません：[オブジェクトオブジェクト]

非同期パイプ

asyncパイプでは、次のように使用できます

{{(chapters | async)?.length

ngModel

現在、ngModelで分割する必要があります

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

参照： angle2のテンプレートにデータが追加されない

*ngIf

別の方法は、ビューの一部を常に*ngIf="data"でラップして、dataが参照可能エラーを防ぐ前にレンダリングされるのを防ぐことです。

190
Günter Zöchbauer