angular2 Bind numerischen Wert an HTML-Element

Question

Der Ablauf der Vorgänge für dieses Problem relevant ist wie folgt: Home-Komponente ruft eine Methode in Cart-Komponente und Cart-Komponente ruft eine Methode in Cart Service.

Startseite Vorlage:

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

Hauptkomponente:

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

ich eine Wagen Komponente haben, wie folgt:

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

Mein Warenkorb Service ist wie folgt:

export class CartService{ 

    cart : any; 
    constructor(){ 

     this.cart=[]; 
    } 

    addToCart(item: any): any { 

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

Warenkorb Vorlage hat folgenden Code:

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

Auch wenn ich Elemente in den Warenkorb gelegt Mein Warenkorb Vorlage hinzufügen zeigt immer 0 in der obigen Zeile. console.log(this.cartItems.length) Diese Zeile in der Warenkorbvorlage zeigt jedoch immer die richtige Nummer an.

Was mache ich falsch?

Answer 1

Versuchen Sie, nachdem Sie unter Änderung zu überprüfen:

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