在不使用"确定"按钮的情况下，如何在从离子选择中选择选项时显示离子输入

Question

我使用离子选择让用户选择选项，在离子选项中包含一个选项列表，用户可以从中选择一个。如果用户选择"其他"选项，则会自动显示一个输入，以便用户键入下拉菜单中不可用的选项。

现在我需要使用离子选择没有确定和取消按钮。由于我已经实现了，当用户选择"其他"选项时，我需要显示离子输入字段以自动显示。如果我与OK&CANCEL(取消(按钮。

现在我需要在没有OK&CANCEL(取消(按钮。只有当用户选择"其他"选项并单击"确定"按钮时，离子输入才会出现。由于我不想在这里使用任何按钮，我希望用户在下拉列表中选择"其他"选项时，无需按下"确定"按钮，"其他"离子输入字段就会直接出现。

以下是我迄今为止在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

您可以像这样在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>