Angular2 Carrinho de compras com botão "Comprar agora" - angular, carrinho de compras

Tentando obter um carrinho de compras, adicione o botão para preenchero serviço de carrinho de compras que armazena a variedade de produtos. O problema é que eu não consigo atualizar minha lista de carrinho de compras dentro do componente carrinho de compras, pois não consigo detectar quando o botão / ou matriz foi preenchido com um novo produto. Que por sua vez não adiciona novos produtos ao ngFor.

Eu li coisas sobre detecção de alterações, zonas, emissores de eventos. Só não tenho certeza qual é o caminho certo para usar neste caso em particular ... Eu anexei meu código abaixo

COMPONENTE DE TECLAS PARA CARRINHO DE COMPRAS

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)

}

}

COMPONENTE DE CARRINHO DE COMPRAS

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

}
}

SERVIÇO DE CARRINHO DE COMPRAS

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;

}

}

Respostas:

No seu componente ShoppingCart, você precisa repetir products e não shoppingCart:

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

Além disso, você precisa ter o ShoppingCartService serviço para ser um serviço compartilhado para ambos os componentes. Para não ter nenhum problema, certifique-se de tê-lo especificado ao inicializar seu aplicativo:

bootstrap(AppComponent, [ ShoppingCartService ]);