Функциональность корзины покупок - обновление промежуточного итога в реальном времени на основе количества каждого купленного товара - PullRequest
Новая
       30

Функциональность корзины покупок - обновление промежуточного итога в реальном времени на основе количества каждого купленного товара

0 голосов
/ 18 октября 2018

У меня есть страница корзины покупок, которая отображает список событий с использованием ngFor.Я пытаюсь реализовать функциональность промежуточного итога (количество участников * цена), обновляя в режиме реального времени при изменении количества участников.Это будет применяться индивидуально к каждому событию.

В моем html-компоненте я использую ngFor для просмотра списка элементов.Этот список элементов получен из подписки, как показано в разделе компонентов.У меня есть несколько участников, которых я хочу наблюдать за изменениями / связыванием.Когда количество посетителей меняется, это должно умножиться на цену и обновить промежуточный итог: 

<div *ngFor="let item of listOfItems; index = i">
  <div class="item">
    <div class="product-image">
      <img src="http://placehold.it/120x166" alt="Placholder Image 2" class="product-frame">
    </div>
    <div class="product-details">
      <p><strong>{{item.title}}</strong></p>
    </div>
  </div>
  <div class="price" #price>{{item.price}}</div>
  <div class="quantity">
    <input type="number" [(ngModel)]="numOfAttendees[i]" value="1" min="1" class="quantity-field">
  </div>
  <div class="subtotal">{{item.subtotal}}</div>
  <div class="remove">
    <button (click)="deleteBasketItem(i)">Remove</button>
  </div>
</div>

В моем компоненте у меня есть список событий (listOfItems), который заполняется в подписке: 

  listOfItems: EventSchema[];
  myState: Observable<fromShoppingCart.State>;

  ngOnInit() {
    this.myState = this.store.select('shoppingCart');
    this.myState.subscribe(val => {
      this.listOfItems = val.basketList;
    });
  }

Для ясности, это моя модель EventSchema: 

export class EventSchema {
    title: string;
    price: number;
    attendees?: string[];
    subtotal?:number;

    constructor(title: string, start: string, end: string, price: number, subject: string, attendees?: string[], subtotal?:number){
        this.title=title;
        this.price=price;
        this.attendees=attendees;
        this.subtotal=subtotal;
    }
}
...