Carrito de compras Angular2 con el botón Comprar ahora - angular, carrito de la compra

Intentando obtener un carrito de compras para agregar el botón para llenarel servicio de carrito de compras que almacena la matriz de productos. El problema es que no puedo actualizar mi lista de carrito de compras dentro de mi componente de carrito de compra ya que no puedo detectar cuándo el botón / o matriz se ha llenado con un nuevo producto. Que a su vez no agrega nuevos productos al ngFor.

He leído cosas sobre detección de cambios, zonas, emisores de eventos. Simplemente no estoy seguro de cuál es el correcto para usar en este caso particular ... He adjuntado mi código a continuación

COMPONENTE DEL BOTÓN DEL CARRITO 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 DEL CARRITO 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();

}
}

SERVICIO DE CARRITO 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;

}

}

Respuestas

En su componente ShoppingCart, necesita iterar de products y no shoppingCart:

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

Además, debes tener el ShoppingCartService servicio para ser un servicio compartido para ambos componentes. Para no tener ningún problema, asegúrese de haberlo especificado al iniciar su aplicación:

bootstrap(AppComponent, [ ShoppingCartService ]);