Question

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

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

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

void sentence_without_latin_character( std::string &s ) {
  std::istringstream is (s);
  std::string word;

  s.clear();
  auto& ctype = std::use_facet<std::ctype<char>>(std::locale("en_US.utf8"));
  while (is >> word) {
    auto p = ctype.scan_is(std::ctype_base::digit, word.data(), &word.back()+1);
    if (p == &word.back()+1) {
      s += word;
      if (is.peek() == ' ') s += ' ';
    }
  }

  std::cout << s << std::endl;
}

这是OrderLine类：

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

在html文件中输入了可实时控制物料数量的方法，并且有一种方法绑定到此输入，该方法可在您输入其他数字后将物料的“旧”数量更改为数量已更改的物料

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

然后是更改数量的方法：

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

我知道要实时更改订单的总价格，我需要Observable（rxjs），但是在这种情况下，我不知道如何实现此目的。

我还将在这里放置Order类，在这里您可以找到订单的totalPrice，这是我需要执行的最后一件事。

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

我将感谢您的任何帮助。

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

简要说明 关于使用吸气剂的唯一方法是，您可以在html中将其引用为类似变量

{{myvariable}}

如果您使用吸气剂。那是一个从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>，）=>（））我们的元素可以如此复杂，例如

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

在结帐（购物车）页面（角度7）中获取产品的总价

1 个答案: