未定義のプロパティ "totalPrice"を読み取ることができません

Question

私はこのコードを私のAngular 2テンプレートに載せています。

<td class="hidden-xs text-center"><strong>Total: &#8369; {{carts.totalPrice}}</strong></td> 

コンソールにcarts.totalPriceを記録すると、正しい値が表示されます。ここにオブジェクトの値があります。

私がここに疑うことは速く、それがプロパティを読み取ることができないことを私に伝え、なぜだオブジェクトよりもテンプレートのロードということです。私は正しい？

EDIT：カートの値を取得する方法です。

getItems(){ 
    this._cartService.getCartItems(localStorage.getItem('currentUserId')) 
     .subscribe((cart) => { 
      this.cartItems = cart.products; 
      // this.totalPrice = cart.totalPrice; 
      this.carts = cart; 
      console.log(this.carts) 
     }, 
     (err) => console.log(err)); 
} 

エラースタックトレース。

Answer 1

これを試してみてください：

<td *ngIf="carts" class="hidden-xs text-center"><strong>Total: &#8369; {{carts.totalPrice}}</strong></td> 

Answer 2

lennys答えは完全に正しいと、私はカップルより多くの選択肢を提示するだろうと思いました。

データの取得は非同期であるため、疑わしいときと同じように、データが到着する前にビューがレンダリングされることを意味します。これは、ビューがレンダリングされる時点でオブジェクトがまだundefined/nullであることを意味します。

これを解決するには、いくつかの選択肢があります。

• 場合によっては、それはそう、あなたは、単にがあなたのコンポーネントにあなたのオブジェクトを初期化することを助けることができるsafe navigation operator
• 使用*ngIf

---

を使用して、あなたのオブジェクト

を初期化しますそれは未定義ではないことを意味します：

carts: Object = {}; 

---

安全なナビゲーション演算子（?）を使用します。

{{carts?.totalPrice}} 

これは、プロパティパスでnullとundefined値を防ぐのに便利な方法です。ビューはレンダリングされますが、プロパティパスは空白として表示されます。

---

使用*ngIf（lennys答えを確認してください）

*ngIfと安全運航事業者との主な相違点である、*ngIfを持つ要素内にラップされたテンプレートからの部分は、完全になることcartsに値が入るまで、DOMから削除されます。