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

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' 按钮以及 class 按钮 '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)' 吗？

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

Customized Increment Arrows on Input doesn't work! How to collect the input value through buttons?

html

input

button

angular

angular7