在结帐（购物车）页面（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

您只需要使用reduce 计算总数。您可以使用吸气剂

  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((,)=>()) 我们的元素可以像我们想要的那样复杂，例如

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