Как создать поле ввода с кнопками + и - в Ionic 3

Question

Как я могу создать поле ввода, имеющее кнопки + и -. Нажав, какой пользователь может изменить количество выбранного продукта, например, этот экран изображение

я знаю, что этот вопрос был здесь раньше, но это не ionic3, и ответ не работает, потому что все значения будут увеличены или уменьшены <- этот вопрос был добавлен, но ответа нет. </p>

Answer 1

Я создал это для вас, измените стили и функциональность по мере необходимости!

ПРОВЕРКА РАБОЧИЙ СТЕКБЛИЦ ??

Ваш component.ts может быть примерно таким, как показано ниже

  constructor() {
    this.shop = this.shop.map(food => {
      food['qty'] = 0;
      return food;
    });
  }

  incrementQty(index: number) {
    this.shop[index].qty += 1;
  }

  decrementQty(index: number) {
    this.shop[index].qty -= 1;
  }

, а ваш component.html может выглядеть примерно так, как показано ниже

<ion-content padding>
    <ion-card *ngFor="let food of shop;let i = index">
        <ion-card-header>
      <ion-title>
        {{i+1}}. {{food.name.first}} {{food.name.last}}
      </ion-title>
    </ion-card-header>
    <ion-toolbar>
      <ion-title>Total Price &nbsp;&nbsp;
        {{food.qty}} Units x ${{food.price}} = 
        ${{food.qty*food.price}}
      </ion-title>
    </ion-toolbar>
        <ion-item>
            <ion-icon name="add-circle" (click)="incrementQty(i)" item-right></ion-icon>
            <ion-input type="number" min="1" [value]="food.qty" [(ngModel)]="food.qty"></ion-input>
            <ion-icon name="remove-circle" (click)="decrementQty(i)" item-right></ion-icon>
        </ion-item>
    </ion-card>
</ion-content>

Надеюсь, это полезно!Счастливое кодирование