angular - 获取结账(购物车)页面中产品的总价(Angular 7)

Question

我想获取并显示客户添加的购物车页面中商品的总价。

目标:客户应该能够观察订单总价的变化。问题是客户可以增加或减少数量。

我有一个从 session 存储中获取的“OrderLine”对象数组。每个都有数量和购买时的价格。

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

这是 OrderLine 类:

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

在html文件中是实时控制商品数量的输入，并且有一个与该输入绑定(bind)的方法，可以在写入不同的数字后将“旧”数量的商品更改为已更改数量的商品.

<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 类，您可以在其中找到订单的总价格，这是我需要实现的最后一件事。

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

我将感谢任何形式的帮助。

Answer 1

你只需要使用reduce来计算总数。您可以使用 setter/getter

  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}}

简单说明 关于使用 getter 只是你可以在 html 中引用像这样的变量

{{myvariable}}

如果你使用 getter 。这是一个以get开头的函数，显示函数的结果

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

关于减少:

reduce 有三个参数。该参数必须与数组具有相同类型。因此，如果我们的数组是对象数组，则三个参数必须是相同的类型。第一个参数是“累加器”，第二个参数是数组的元素，第三个参数是“初始值”。 “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}

看看它的样子reduce((< T >,< T >)=>(< T >)) 我们的元素可以非常复杂，例如:

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 的对象。如果您不向reduce 提供第三个参数，则reduce 会获取数组的第一个元素并迭代其他元素。这是因为如果我们做一些类似的事情

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})