Не могу прочитать свойство «totalPrice» of undefined

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

Это удобный способ защиты от нулевых и неопределенных значений в дорожках собственности. Представление все еще отображается, но путь свойства отображается как пустой.

---

Использование *ngIf (проверьте lennys ответ)

Основное отличие *ngIf и оператора безопасной навигации в том, что часть из шаблона, который обернут внутри элемента с *ngIf, будет полностью удалены из DOM, пока не будут значения в carts.