按钮点击事件提交数量

Question

这个问题与我最近在论坛上提出的另一个问题有关。我必须开始撰写新文章，因为我的问题随着时间的推移而演变，而我原来的问题不再有效。我将问题范围缩小到每次单击时提交的数量按钮，因此我只显示我的数量按钮代码。我要查找的是如何才能使按钮仅在单击提交按钮时提交。现在，他们每次单击时都会控制台记录“单击提交”日志。

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>

并在控制器中：

plus($event, product:any) {
  $event.preventDefault();
  product.nullValue++;
  this.quantity = product.nullValue;
  console.log('click submitted');
  return false;  
  return this.quantity;
 
}

minus(product:any){ 
 product.nullValue--;
  this.quantity = product.nullValue;
  console.log('click submitted'); 
  return false;
  return this.quantity;

}

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

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

Answer 1

这仅用于测试目的。如果要提交给“订单清单”，请单价，数量，该产品的小计以及其他信息。我测试了这个解决方案。

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

这是结果