在不使用 OK 按钮的情况下从 ion-select 选择选项时，如何使离子输入出现？

Question

我正在使用 ion-select 让用户选择 select 选项，在 ion-option 中包含一个选项列表，用户可以从中选择一个。如果用户选择 "Others" 选项，将自动出现输入，以便用户键入下拉列表中不可用的选项。

现在我需要使用没有 OK 和 CANCEL 按钮的 ion-select。因为我已经实现了，所以我需要显示离子输入字段，以便在用户选择 "Others" 选项时自动出现。如果我使用“确定”和“取消”按钮，此逻辑工作正常。

现在我需要在没有“确定”和“取消”按钮的情况下实现相同的逻辑。仅当用户选择 "Others" 选项并单击 "OK" 按钮时，离子输入才会出现。因为我不想在这里使用任何按钮，所以我希望 "Others" ion-input 字段在用户选择下拉列表中的 "Others" 选项时直接出现，而无需按 OK 按钮.

这是我迄今为止在 HTML 中尝试过的方法：

<ion-select class="mydate" formControlName="bankselect" [(ngModel)]="vm.bankselect" interface="popover" (ionChange) = "bankChange($event)"  class="textcolor" value="bank">
                  <ion-option *ngFor="let item of banklist; let i =index"  value="{{i}}">{{item.value}}</ion-option>
                </ion-select>

<ion-item no-lines *ngIf = "vm.bankselect == 6">
                    <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
                    <ion-label floating color="primary">Others</ion-label>
                    <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input>  
               </ion-item>

Answer 1

我不确定，但也许你应该试试 (ionSelect)。

在你的 .html 文件中应该是这样的。

   <ion-select "some codes...">
  <ion-option *ngFor="...." "some codes..."   (ionSelect)="showInput(item.value)"></ion-option>
  </ion-select>

<ion-item no-lines *ngIf = "show">
                <ion-icon class="iconstyle" name="logo-bitcoin" item-start></ion-icon>
                <ion-label floating color="primary">Others</ion-label>
                <ion-input type="text" (ionChange)="notify($event)" class="textcolor" formControlName = "Others" [(ngModel)]="vm.Others" maxlength="50" tabindex="1" (keyup)="moveFocus($event,query, false)"></ion-input>  
           </ion-item>

和 .ts 文件

show: boolean = false;

showInput(item){
if(item == 'other'){
this.show = true;
}
else
this.show = false;
}

Answer 2

You can have one input inside ion-select like this and add required CSS based on your need.

 <ion-item> 
   <ion-input [placeholder]="label"></ion-input>                        
   <ion-select [(ngModel)]="value" [multiple]="isMultiSelect">
     <ion-select-option *ngFor="let option of options" [value]="option.id"> 
         {{option.label}}
      </ion-select-option>   
   </ion-select> 
 </ion-item>

在不使用 OK 按钮的情况下从 ion-select 选择选项时，如何使离子输入出现？

How can I make ionic input to appear when choosing options from the ion-select without using OK button?

mobile

android

hybrid-mobile-app

ionic3

angular