自定义增量箭头在输入时无法使用! 如何通过按钮收集输入值？

Question

在我的应用程序的开始，使用输入箭头或键盘，我的数据发送没有任何问题.为了使UI更友好，我决定隐藏浏览器箭头，并实现一些按钮，以增加和减少在同一输入.我在我的html中有以下两个元素.一个是一个输入，以确定添加到购物车的单位，另一个元素是一个按钮，应发送该信息到另一个组件

<div class='child'>
  <div class='fourth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' class='def-number'>
        <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus">-</a>
        <input type='number' placeholder='0' [(ngModel)]='item.quantity' (change)='this.updateCart(item)' min='0'>
        <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class='plus'>+</a>
      </li>
    </ul>
  </div>
</div>
<div class='child d-flex align-items-center justify-content-center'>
  <div class='fifth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' style='line-height: 82px'>
        <button class='cart' (click)='addItem()'><i class='icon-addcart'></i></button>
      </li>
    </ul>
  </div>
</div>

这就是我的功能

  updateCart(item, idProduct) {
    console.log(item);
    this.cart.updateItem(item);
    this.eCart.next(this.cart.getCart());
  }

如果我用键盘修改输入量，我就能顺利地把数据传到我的'updateCart()'函数中，问题出在'plus'和'minus'按钮和'cart'类按钮上，因为我不知道如何让它以同样的方式收集数据。

谁能给我出出主意，我应该怎么做呢，先谢谢你。

Answer 1

public updateQuantity(update: number): void {
  this.item.quantity += update;
}

public updateCart(item): void {
    console.log(item);
    this.cart.updateItem(item);
    this.eCart.next(this.cart.getCart());
}

<div class='child'>
  <div class='fourth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' class='def-number'>
        <a (click)='updateQuantity(-1)' class="minus">-</a>
        <input type='number' placeholder='0' [(ngModel)]='item.quantity' (ngModelChange)='updateCart(item)' min='0'>
        <a (click)='updateQuantity(1)' class='plus'>+</a>
      </li>
    </ul>
  </div>
</div>
<div class='child d-flex align-items-center justify-content-center'>
  <div class='fifth'>
    <ul class='p-0 m-0'>
      <li *ngFor='let item of product.items' style='line-height: 82px'>
        <button class='cart' (click)='addItem()'><i class='icon-addcart'></i></button>
      </li>
    </ul>
  </div>
</div>

你可以尝试(ngModelChange)="updateCart($event) "而不是(change)='updateCart(item)'吗？