Получить общую стоимость товаров на странице оформления заказа (корзина) (Angular 7)

Question

Я хотел бы получить и отобразить общую стоимость товаров на странице корзины, добавленной клиентом.

Цель: клиент должен иметь возможность наблюдать изменение общей стоимости заказа.Проблема в том, что клиент может увеличить или уменьшить количество.

У меня есть массив объектов "OrderLine", взятых из хранилища сеансов.У каждого из них есть количество и ценаWhenBought.

@SessionStorage({key: 'cart'}) orderLineMealsInCart: Array<OrderLine> = [];

, а вот класс OrderLine:

export class OrderLine {
  mealId?: number;
  meal?: Meal;
  orderId?: number;
  quantity: number;
  priceWhenBought: number;
}

В html-файле есть ввод, который контролирует количество товара в режиме реального времени ик этому входу привязан метод, который меняет элемент со «старым» количеством для элемента с измененным количеством после того, как вы записали другое число.

<div *ngFor="let orderLineMeal of orderLineMealsInCart">
<div class="cartMealsSection">

  <div *ngFor="let meal of mealsForImage">
    <div *ngIf="meal.id === orderLineMeal.mealId">
      <img src="{{meal.picture}}" alt="" class="cartMeal-picture">
    </div>
  </div>
  <div>{{orderLineMeal.mealId}}</div>
  <div>{{orderLineMeal.priceWhenBought}}</div>
  <div>{{orderLineMeal.quantity}}</div>
  <div>{{orderLineMeal.quantity * orderLineMeal.priceWhenBought}}</div>
</div>

<div>
  <div>
    <button (click)="deleteOrderLineMealFromCart(orderLineMeal)">Delete</button>
  </div>

  <div>
    <mat-form-field>
    <input type="number" matInput [(ngModel)]="orderLineMeal.quantity" (ngModelChange)="changeOrderLineMeal(orderLineMeal)">
    </mat-form-field>
  </div>
</div>

, а затем метод дляизменение количества:

    changeOrderLineMeal(orderLineMeal: OrderLine) {
    const index = this.orderLineMealsInCart.indexOf(orderLineMeal);
    this.orderLineMealsInCart[index] = orderLineMeal;
    (<any>this.orderLineMealsInCart).save(); // <- saving to the session storage
  }

Я знаю, что для изменения общей цены заказа в режиме реального времени мне нужна Observable (rxjs), но в этом случае я понятия не имею, как этого добиться.

Я также добавлю сюда класс Order, где вы можете найти totalPrice заказа, последнее, что мне нужно реализовать.

export class Order {
  id?: number;
  mobilenumber: string;
  customerName: string;
  pickUpDateAndTime?: Date;
  orderedDateAndTime?: Date;
  comment: string;
  orderLines?: OrderLine[];
  totalPrice:  number;
}

Я буду благодарен за любую помощь.

Answer 1

Вам нужно только рассчитать общую сумму, используя уменьшение.Вы можете использовать геттер

  get total()
  {
    return this.items.reduce((sum,x)=>
    ({quantity:1,
      priceWhenBought:sum.priceWhenBought+x.quantity*x.priceWhenBought}),
    {quantity:1,priceWhenBought:0}).priceWhenBought;
  }

  //In your .html
  {{total}}

Краткое объяснение об использовании геттера только в том, что вы можете ссылаться в html на переменную, такую ​​как

{{myvariable}}

Если выиспользовать геттер.Это функция, начинающаяся с get, показывающая результат функции

{{myget}}
get myget()
{
    return "Hello word";
}

О сокращении:

уменьшение имеет три аргумента.Эти аргументы должны быть одного типа массива.Поэтому, если наш массив является массивом объектов, три аргумента должны быть одного типа.Первый аргумент - это «накопитель», второй аргумент - это элемент массива, а третий аргумент - «начальное значение».Элемент "transform" тоже должен быть того же типа

Итак, если наш массив представляет собой массив чисел, то можно сделать

[1,4,7,2].reduce((sum,x,0)=>(sum+x))

Если у нас есть массив элементов, таких как

this.total2=[
      {x:1},
      {x:4},
      {x:7},
      {x:2}
    ].reduce((sum,x)=>({x:sum.x+x.x}))  //total2 will be{x:14}

Обратите внимание, что это способ уменьшить ((<<>, ) => ()) Наш элемент может быть настолько сложным, что мы хотим, например,

this.total2=[
  {x:1,y:3},
  {x:4,y:4},
  {x:7,y:5},
  {x:2,y:6}
].reduce((sum,x)=>({x:sum.x+x.x,y:sum.y+x.y})) //return {x:14,y:18}

Снова посмотрите, что «результат» должен быть объектом со свойствами x и y.Если вы не используете feed с третьим аргументом, используйте take для первого элемента массива и выполняйте итерации по остальным.Это причина, потому что если мы сделаем что-то вроде

this.total2=[
  {x:2,y:3},
  {x:4,y:4},
  {x:7,y:5},
  {x:2,y:6}
].reduce((sum,x)=>({x:sum.x+x.x*x.y,y:1})) //return {x:65,y:1}
  //return 2+4*4+7*5+2*6 ¡¡at first sum={x:2,y:3}, but not use the "y"
  //to calculate the product: is NOT 2*3

//So, we need add the third argument
 .reduce((sum,x)=>({x:sum.x+x.x*x.y,y:1}),{x:0,y:0})