输入上的自定义增量箭头不起作用！如何通过按钮收集输入值？

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()”函数将毫无问题地获取数据。 问题在于“加号”和“减号”按钮以及类按钮“购物车”，因为我不知道如何让它以相同的方式收集数据

谁能告诉我我应该做什么？ 提前谢谢你

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)' 吗？