2

Есть страница на которой отображается каталог товаров и корзина для них. При нажатии на кнопку "купить", данные о товаре добавляются в 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>
1
  • У вас были противоречивые формулировки - "но не компонента корзины не обновляются" и "чтобы она обновлялась автоматически". Проверте мою правку. Я правильно понял смысл сказаного?
    – 0xdb
    9 дек 2017 в 14:56

1 ответ 1

0

Идея в том, что в расшареном между компонентами сервисом.

@Injectable()
export class MyService {

Имеется поле - хранитель значения, которым хочется обменяться между компонентами и Observable представление этого поля.

// Observable boolean
private triggerSource = new Subject<boolean>();

// Observable boolean stream
trigger = this.triggerSource.asObservable();

// Service commands
announce(value: boolean) {
  this.trigger.next(value);
}

Далее, компонента, которая хочет поймать событие, что данные доступны, "подписывается" на Observable.

this.subscription = myService.trigger.subscribe(
  triggerSource => {
    if (triggerSource)
    ...
});

А компонента, котора порождает событие, инициирует Observable.

this.myService.announce(true)

Тем самым вызывая выполнение тела функции в trigger.subscribe.

Так можно кратко описать пример, который можно найти здесь -> https://angular.io/guide/component-interaction. А для большего понимания магии происходящего, рекомендую поискать что-нибудь по реактивному программированию.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.