Angular2 Panier d'achat avec bouton Acheter maintenant - angulaire, shopping-cart

Essayer d'obtenir un bouton d'ajout de panier à remplirle service de panier qui stocke la gamme de produits. Le problème est que je ne peux pas mettre à jour la liste de mon panier dans le composant de mon panier car je ne peux pas détecter quand le bouton / ou le tableau a été rempli avec un nouveau produit. Ce qui à son tour n’ajoute pas de nouveaux produits au ngFor.

J'ai lu des articles sur la détection des changements, les zones, les émetteurs d'événements. Juste pas sûr de savoir lequel est le bon à utiliser dans ce cas particulier ... J'ai joint mon code ci-dessous

COMPOSANT DU BOUTON DE CHARIOT

import {Component, OnInit, Input, NgZone} from "angular2/core"
import {ShoppingCartService} from "./shopping-cart.service.js"

@Component({
selector: "add-cart",
template:`<button (click)="addToCart(product)">ADD TO    CART</button>`,
inputs: ["product"]
})
export class AddCartComponent {

constructor(
private _shoppingCartService: ShoppingCartService
) {}

addToCart(product: any) {

console.log(this.product);
this._shoppingCartService.add(this.product)

}

}

COMPOSANT DU PANIER

import {Component, OnInit} from "angular2/core";
import {ShoppingCartService} from "./shopping-cart.service.js"

@Component({
selector: "shopping-cart",
template:`
<div id="shopping-cart">

<ul>
<li *ngFor="#product of shoppingCart">
{{product.title}}
<li>
</ul>

</div>
`
})

export class ShoppingCartComponent implements OnInit {

products: any[];

constructor(
privarte _shoppingCartService: ShoppingCartService;
) {}

ngOnInit() {

this.products = shoppingCartService.get();

}
}

SERVICE DE PANIER

import {Injectable} from "angular2/core";

@Injectable()
export class ShoppingCartService {

products: any[];

constructor() {

this.products = [];

}

add(product: any){

this.products.push(product);
}

remove(index: number) {

if (index > -1) {
this.products.splice(index, 1);
}

}

clear() {

this.products = [];

}

get() {

return this.products;

}

}

Réponses:

Dans votre composant ShoppingCart, vous devez effectuer une itération de products et pas shoppingCart:

<ul>
<li *ngFor="#product of products"> <------
{{product.title}}
<li>
</ul>

De plus, vous devez avoir le ShoppingCartService service pour être un service partagé pour les deux composants. Pour ne pas avoir de problème, assurez-vous de l'avoir spécifié lors du démarrage de votre application:

bootstrap(AppComponent, [ ShoppingCartService ]);