Question

与此问题相关的操作流程如下： Home组件调用Cart组件中的方法，Cart组件调用Cart服务中的方法。

主页模板：

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

主页组件：

export class Home {

    halls: Object;
    specific_hall: Object;
    cart : any;

    public cartInstance: Cart= new Cart(this.cartService);


    constructor(private homeService: HomeService, private cartService: CartService){

        this.cart=[];
    }

    addToCart(item: any){

        this.cart.push(item)
        this.cartInstance.addToCart(item)   
    }
}

我有一个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>

即使我向购物车添加元素，我的购物车模板也会在上面的行中显示为0。 console.log(this.cartItems.length)购物车模板中的这一行总是显示正确的数字。

我做错了什么？

Answer 1

在进行以下更改后尝试检查：

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

angular2将数值绑定到html元素

1 个答案: