2016-11-17 5 views
3

私はちょうど以下の問題を4時間修正しようとしました。角2 /イオン2の未定義のプロパティによりテンプレートが更新されない

<ion-card *ngIf="user"> 
     <ion-item> 
     <h2>{{user.FirstName}}!</h2> 
     <p>{{user.Company.Name}}</p> 
     </ion-item> 
</ion-card> 
<some-other-component></some-other-component> 


user = { 
    FirstName: 'Nick' 
}; 

user.Companyは設定されていません。私のコンポーネント全体が機能しなくなりました。 ion-cardsome-other-componentは一度レンダリングされた後に更新が停止しました。クリックイベントに応答していましたが、更新はしていません。

私の質問です:Angular/Ionicに表示させる方法はありますか?

私が修正したのは<p>{{user?.Company?.Name}}</p>です。私たちは現在、すべてのオブジェクトのプロパティの存在をチェックする必要があります。私は、この動作の仕方を変えるために設定/設定する必要があるものがあるかどうか疑問に思っています。望ましい結果は、コンソールエラーか、Angular 1.xのようにレンダリングするだけです。

答えて

1

この場合、ただ1つのエルビ演算子(?)が必要です。あなたはion-card要素で*ngIf="user"を含めているので、あなただけのCompanyプロパティは、このようなnullでないかどうかを確認する必要があります。

<p>{{user.Company?.Name}}</p> 
+0

私の問題を解決しても、nullであるかもしれないすべてのデータに対して、これを行う必要はありません。質問はどのように大声でエラーを出力するか、またはnullを無視するように角度を得ることができるかどうかです。 – Nix

+1

@Nix私はsebaferrerasの回答に同意します。会社の配列やデータintの会社の配列にnullがある場合、.tsファイルには条件に使用するnull値をローカルに作成する必要があります。 API呼び出し。 –

+0

現実世界のデータモデルでこれがどのように非現実的であるか知っていますか?私の質問で述べたように、私は 'elvis'以外のものを探しています。 – Nix

2

いいえ、ランタイムエラーにレンダリングを強制する設定はありません。あなたは '?'で課題をチェックしなければなりません。内部の割り当てをチェックするメソッドにバインドすることができます。

関連する問題