angular - Cannot read property "totalPrice" of undefined

Question

I have this code on my Angular 2 template.

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

When I log carts.totalPrice in console, it shows the correct value. Here is the object value.

What I suspect here is that the template loads faster than the object that's why it tells me that it cannot read the property. Am I right?

EDIT: This is my method on getting the carts value.

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

Error stack trace.

Answer 1

Try this:

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