Есть страница на которой отображается каталог товаров и корзина для них. При нажатии на кнопку "купить", данные о товаре добавляются в localstorage
, но компонент корзины не обновляется (только после F5).
Как сделать так, чтобы он обновлялся автоматически? Видимо нужно создать сервис и сделать Observable
, но не понимаю как именно реализовать.
catalog:
<div class="content">
<div class="item" *ngFor="let auto of auto; let i=index">
<div> <img src="../../assets/db/{{auto.photo}}" alt=""></div>
<div class="text">
<p>{{auto.name}} - {{auto.price}} руб.</p>
<p><input type="submit" value="Купить" (click)="toCart(i)"></p></div>
</div>
export class MainComponent implements OnInit {
auto: any;
cart=[];
price=[];
constructor(private service:DataService) { }
ngOnInit() {
this.getItems();
}
getItems(){
this.service
.getItems()
.subscribe(goods => {
this.auto = goods;
} )
}
toCart(i){
this.cart.push(this.auto[i]);
this.price.push(this.auto[i].price);
localStorage.setItem("cart",JSON.stringify(this.cart));
localStorage.setItem("price",JSON.stringify(this.price));
}
cart component:
export class CartComponent implements OnInit {
list = localStorage.getItem("cart");
names = JSON.parse(this.list);
len = this.names.length;
price = this.names.price;
Message: string;
constructor() { }
ngOnInit() {
}
send(){
this.Message = "Готово";
localStorage.setItem('cart',JSON.stringify(""));
}
}
cart template:
<div class="content">
<li *ngFor="let name of names; let i=index">
<p>{{name.name}} - {{name.price}}руб.</p>
</li>
<p>Количество: {{len}} </p>
{{Message}}
<p><input type="submit" value="Оформить заказ" (click)="send()"></p>