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

Question

如何创建一个带有 + 和 - 按钮的输入框。单击哪个用户可以更改所选产品的数量，如此屏幕图像

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

Answer 1

我为您创建了这个，根据需要修改样式和功能！

检查 工作 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>

希望这有帮助！快乐编码