Angular 按钮单击事件提交数量

这个问题与我最近在论坛上提出的另一个问题有关。我不得不开始一篇新文章，因为我的问题随着时间的推移而演变，而我原来的问题不再有效。我把我的问题缩小到每次点击数量按钮都提交，所以我只显示我的数量按钮代码。我想了解的是，如何才能让按钮仅在单击提交按钮时提交。现在，每次单击时，他们都会记录“单击提交”

HTML

<button class="minus-btn" (click)="minus(product)" type="button" name="btn" onclick="return false;">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input class="num" name="int" [value]="product.nullValue" formControlName="int" ng-minlength="0" type="number" required />
<button class="plus-btn" (click)="plus($event, product)" name="btn" type="button" onclick="return false;">
<img src="../assets/images/plus.svg" alt="plus" /></button>

问题出在我创建的管道中。它多次获取数量，这反映在返回的sub_总计中

@Pipe({name: 'grandtotal'})

export class GrandTotalPipe implements PipeTransform {
  
  sub_total = 0;
  product_price = 0;
  quantity = 0;
  total = 0;
  transform(product_price: number, quantity: number, sub_total: number) {
    sub_total = product_price * quantity;
    sub_total += sub_total;
        return sub_total; 
    
  }
}

我使用以下命令在HTML中调用管道：

<div>Grand Total {{ product_price | grandtotal:  quantity : sub_total }}</div>

---

这仅用于测试目的。如果你想提交到订单清单单价、数量、本产品小计等。我测试这个解决方案

  quantity = 0;
  subtotal = 0;
  product_price = 15;

方法

plus(event: any) {
    event = 1;
    this.quantity += event;
    console.log(this.quantity);
    this.getT();
  }
  
  minus(event: any){  
    event = 1;  
    this.quantity -=event;
    console.log(this.quantity); 
    this.getT();
  }

  getT(): void {
    const to = this.quantity * this.product_price;
    console.log(to);
    this.subtotal = to;
  }

  getTotalP() {
    return this.quantity * this.product_price;
  }

  SaveProdPrice(): void {
      console.log('ProdPrice', this.product_price);
      console.log('ProdQuant', this.quantity);
      console.log('SubTotal', this.getTotalP());
  }

这就是结果

---

两种方法都有控制台。记录“单击提交”。您希望看到什么？您的两个按钮都有一个绑定到click事件的方法，并且这两个方法都记录“click Submited”。对我来说，这似乎是意料之中的行为。按钮没有提交任何内容，它们只是在单击时调用这些方法。问题是，单击事件会在提交表单之前更新数量。这会导致提交多个数量，并且处理数量的逻辑失败。我看不出代码本身存在很多问题，但我仍然不明白所需的行为是什么。是否要在更新数量之前提交表单？PS你有一个无法到达的返回声明，我假设它是偶然留在那里的。让我们来吧。谢谢，托马斯维桑特，但我需要的是总计，而不是小计。我需要将第一个数量乘以价格的小计添加到第二个数量乘以价格，对于包含两个项目的购物车。例如，对于具有小计价格的产品列表，使用减少函数求和。小计价格product.reduceac，cur=>ac+cur，0；这是一个只从orderlist中提取小计价格的解决方案getTotal=>{返回this.order.mapt=>t.subtotalprice.ReduceAc，value=>acc+value，0}谢谢，Tomasz Vizaint。我不理解你的代码，所以我正在尝试一些不同的东西。这是我的排练项目，你的例子也可以帮助你。

plus(event: any) {
    event = 1;
    this.quantity += event;
    console.log(this.quantity);
    this.getT();
  }
  
  minus(event: any){  
    event = 1;  
    this.quantity -=event;
    console.log(this.quantity); 
    this.getT();
  }

  getT(): void {
    const to = this.quantity * this.product_price;
    console.log(to);
    this.subtotal = to;
  }

  getTotalP() {
    return this.quantity * this.product_price;
  }

  SaveProdPrice(): void {
      console.log('ProdPrice', this.product_price);
      console.log('ProdQuant', this.quantity);
      console.log('SubTotal', this.getTotalP());
  }