无法读取未定义的属性“totalPrice”

我的 Angular 2 模板上有这段代码。

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

当我登录时carts.totalPrice在控制台中，它显示正确的值。这是对象值。

我怀疑这里模板的加载速度比对象快，这就是为什么它告诉我它无法读取属性。我对吗？

编辑：这是我获取购物车价值的方法。

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

错误堆栈跟踪。

尝试这个：

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