从离子选择中选择选项而不使用确定按钮时，如何使离子输入出现？答案

【问题标题】：How can I make ionic input to appear when choosing options from the ion-select without using OK button?从离子选择中选择选项而不使用确定按钮时，如何使离子输入出现？
【发布时间】：2018-11-10 09:53:12
【问题描述】：

我正在使用 ion-select 让用户选择选项，并且在 ion-option 内部包含一个选项列表，用户可以从中选择一个。如果用户选择“其他”选项，则会自动出现一个输入，以便用户键入下拉菜单中不可用的选项。

现在我需要使用没有 OK 和 CANCEL 按钮的离子选择。由于我已经实现了，当用户选择“其他”选项时，我需要显示离子输入字段自动出现。如果我使用 OK & CANCEL 按钮，此逻辑工作正常。

现在我需要在没有 OK 和 CANCEL 按钮的情况下实现相同的逻辑。仅当用户选择“其他”选项并单击“确定”按钮时，离子输入才会出现。由于我不想在此处使用任何按钮，因此我希望用户在不按 OK 按钮的情况下在下拉菜单中选择“Others”选项时直接显示“Others”离子输入字段。

这是我迄今为止在我的 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>

【问题讨论】：

标签： android angular mobile ionic3 hybrid-mobile-app

【解决方案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;
}

【讨论】：

【解决方案2】：

您可以像这样在 ion-select 中输入一个，并根据需要添加所需的 CSS。

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

【讨论】：