离子2:禁用在<ion-item-sliding>中向后滑动

时间:2016-10-09 02:36:55

标签: ionic2

我正在使用离子2离子项目滑动与离子项目和离子项目选项进行滑动,并显示如下两个按钮和文本框。我的问题是,当我单击ion-item-options列表中的文本框时,整个组件向后滑动,因此我无法在文本框中输入任何数据。在文本框中输入数据之前,如何防止向后滑动?

<ion-item-sliding #item *ngFor="let order of orders">
  <ion-item>

    <div class="pending-order-list">
      <div class="row custom-padding-xs custom-padding">
        <div class="col-xs-3"></div>
        <div class="col-xs-9">
          <div class="panel-order-date">
            <span class="list-label">{{ "pendingOrder.date" | translate }}</span>
            <span class="list-input">{{ order.orderDate | date }}</span>
          </div>
          <div class="panel-order-number">
            <span class="list-label">{{ "pendingOrder.orderNo" | translate }}</span>
            <span class="list-input">{{order.orderNo}}</span>
          </div>
        </div>
      </div>

      <div class="row custom-padding-xs">
        <div class="col-xs-3">
          <span class="list-label">{{ "pendingOrder.customer" | translate }}</span>
        </div>
        <div class="col-xs-6 bold">
          {{order.customer}}
        </div>
        <div class="col-xs-3 bold text-right">
          {{order.sum | numberFormat}}
        </div>
      </div>

      <div class="row custom-padding-xs">
        <div class="col-xs-3">
          <span class="list-label">{{ "pendingOrder.chain" | translate }}</span>
        </div>
        <div class="col-xs-6 ">
          {{order.chain}}
        </div>
        <div class="col-xs-3 status">
          {{order.status}}
        </div>
      </div>
    </div>

  </ion-item>
  <ion-item-options side="right">
    <div class="row custom-padding-xs">
      <div class="col-xs-6">
        <input type="text" name="" id="" class="input-custom" />
      </div>
      <div class="col-xs-3">
        <button class="btn-small" (click)="confirmOrder(order)">{{ "pendingOrder.confirm" | translate }}</button>
      </div>
      <div class="col-xs-3">
        <button class="btn-small black">{{ "pendingOrder.reject" | translate }}</button>
      </div>
    </div>

  </ion-item-options>

  

0 个答案:

没有答案