Настроенные стрелки приращения на вводе не работают! Как собрать вводимое значение через кнопки? - PullRequest
Новая
       15

Настроенные стрелки приращения на вводе не работают! Как собрать вводимое значение через кнопки?

0 голосов
/ 27 мая 2020

В начале моего приложения, используя стрелки ввода или клавиатуру, мои данные были отправлены без каких-либо проблем. Желая сделать пользовательский интерфейс более дружелюбным, я решил скрыть стрелки браузера и реализовать несколько кнопок для добавления и вычитания в одном вводе. В моем 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 (). проблема связана с кнопками «плюс» и «минус» и кнопкой класса «тележка», поскольку я не знаю, как заставить его собирать данные таким же образом

Кто-то, кто может дать мне идею что мне делать? Заранее спасибо

1 Ответ

1 голос
/ 27 мая 2020 

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)'?

...