Ionic 2 无增减数字输入按钮答案

【问题标题】：Ionic 2 number input button without increment and decrementIonic 2 无增减数字输入按钮
【发布时间】：2020-04-21 01:18:01
【问题描述】：

我有一个数字输入按钮，我希望它没有数字输入右侧的增量和减量。

   <ion-list>
      <ion-item>
        <ion-icon name="star" item-left ></ion-icon>
        <ion-label item-left >Standart 723128 </ion-label>
        <ion-icon item-right class="plus-minus" name="remove-circle" color="danger"(click)="decrement()"></ion-icon>
            <input type="number" item-right ng-model="currentNumber" style="text-align: center; width: 20%;" value="{{currentNumber}}">
        <ion-icon item-right class="plus-minus" name="add-circle" color="secondary" (click)="increment()"></ion-icon>
      </ion-item>
    </ion-list>

【问题讨论】：

您面临的问题是什么？ StackOverflow 不适合要求其他人为您编写代码。

标签： ionic-framework ionic2

【解决方案1】：

如果你需要这个

使用

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

【讨论】：

【解决方案2】：

使用NgModel 将 currentNumber 绑定到输入，然后增加或减少其值

<ion-icon item-right class="plus-minus" name="remove-circle" color="danger" (click)="currentNumber--"></ion-icon>
<input type="number" item-right [(ngModel)]="currentNumber" />
<ion-icon item-right class="plus-minus" name="add-circle" color="secondary" (click)="currentNumber++"></ion-icon>

【讨论】：