如何在 Ionic 3 中创建一个带有 + 和 - 按钮的输入框

Question

如何创建一个带有 + 和 - 按钮的输入框。点击哪个用户可以更改所选产品的数量，喜欢这个屏幕image

我知道这个问题以前在这里但它不是 ionic3 并且答案不起作用因为所有的值都会增加或减少<-这个问题是在那里添加的但没有人回答

Answer 1

I created this one for you, modify styles and functionality as needed!

CHECK WORKING STACKBLITZ

你的 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>

希望对您有所帮助！编码愉快

如何在 Ionic 3 中创建一个带有 + 和 - 按钮的输入框

How create an input box having a + and - button in Ionic 3

ionic-framework

ionic3

angular