angular2将数值绑定到html元素

与此问题相关的操作流程如下所示： 主组件调用购物车组件中的方法，购物车组件调用购物车服务中的方法。

主模板：

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="addToCart(specific_hall)">Add to cart</button>

我有一个Cart组件，如下所示：

export class Cart {

    cartItems: any;
    cartItemCount : number;

    constructor(private cartService: CartService){

        this.cartItems=[];
        this.cartItemCount=0;
    }


    addToCart(item: Object): void {

        this.cartItems.push(this.cartService.addToCart(item))
        console.log(this.cartItems.length)

        this.cartItemCount=this.cartItems.length;
    }
}

export class CartService{

    cart : any;
    constructor(){

        this.cart=[];
    }

    addToCart(item: any): any {

        this.cart.push(item);
        return this.cart;
    }
}

我的购物车服务如下：

export class Cart {

    cartItems: any;
    cartItemCount : number;

    constructor(private cartService: CartService){

        this.cartItems=[];
        this.cartItemCount=0;
    }


    addToCart(item: Object): void {

        this.cartItems.push(this.cartService.addToCart(item))
        console.log(this.cartItems.length)

        this.cartItemCount=this.cartItems.length;
    }
}

export class CartService{

    cart : any;
    constructor(){

        this.cart=[];
    }

    addToCart(item: any): any {

        this.cart.push(item);
        return this.cart;
    }
}

购物车模板具有以下代码：

<span> Items in the cart: {{cartItemCount}} </span>

购物车中的项目：{{cartItemCount} 即使我将元素添加到购物车，我的购物车模板在上面的一行中始终显示0

console.log（this.cartimes.length）

购物车模板中的此行始终显示正确的编号

---

我做错了什么？

在做出以下更改后尝试检查：

addToCart(item: Object): void {
    this.cartItems = this.cartService.addToCart(item);
    console.log(this.cartItems.length)
    this.cartItemCount=this.cartItems.length;
}

---

这是一样的，没有帮助！我以前有过这样的代码，然后我修改了上面的代码。