Angular2 Количка за пазаруване с купете сега - ъглова, количка за пазаруване

Опитвате се да получите бутон за добавяне на кошницата за пазаруване, за да я запълнитеуслугата за пазаруване, която съхранява масивите от продукти. Проблемът е, че не мога да актуализирам списъка си с колички в елемента си за пазаруване, тъй като не мога да разбера кога бутонът / масивът е бил запълнен с нов продукт. Това от своя страна не добавя нови продукти към ngFor.

Четох неща за откриване на промени, зони, емитенти на събития. Просто не сте сигурни коя е правилната, която да използвате в този конкретен случай ... Свързах ми кода по-долу

КОМПОНЕНТ НА ​​КОМПОНЕНТА НА КОМПОНЕНТА ЗА КОЛЕКЦИИ

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)

}

}

КОМПОНЕНТ ЗА КАБЕЛИ

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

}
}

СЕРВИЗ НА КАРТАТА

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;

}

}

Отговори:

Във вашия компонент ShoppingCart трябва да повторите products и не shoppingCart:

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

Освен това трябва да имате ShoppingCartService услугата да бъде споделена услуга за двата компонента. За да нямате проблем, уверете се, че сте го посочили при зареждане на приложението ви:

bootstrap(AppComponent, [ ShoppingCartService ]);