如何使用不同的按钮弹出离子选择?
<ion-select [(ngModel)]="choices" multiple="true">
<ion-option>Appliances</ion-option>
<ion-option>Automobile</ion-option>
<ion-option>Cellphones</ion-option>
<ion-option>Clothing</ion-option>
<ion-option>Computers</ion-option>
<ion-option>Electronics</ion-option>
<ion-option>Toys</ion-option>
</ion-select>
您可以使用ionic-angular
ViewChild
html
<ion-select [(ngModel)]="choices" multiple="true" #mySelect>
<ion-option>Appliances</ion-option>
<ion-option>Automobile</ion-option>
<ion-option>Cellphones</ion-option>
<ion-option>Clothing</ion-option>
<ion-option>Computers</ion-option>
<ion-option>Electronics</ion-option>
<ion-option>Toys</ion-option>
</ion-select>
<button ion-button (click)="openSelect()">Open</button>
<button ion-button (click)="closeSelect()">Close</button>
TS
import { Component, ViewChild } from '@angular/core';
import { NavController,Content, Select } from 'ionic-angular';
import { Events } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage
{
@ViewChild('mySelect') selectRef: Select;
constructor(public navCtrl: NavController,public events: Events)
{}
openSelect()
{
this.selectRef.open();
}
closeSelect()
{
this.selectRef.close();
}
}
感谢@pareshgami
但是,在离子4中,如果仅在单击button
并隐藏select
1.Import IonSelect
import { Component, ViewChild } from '@angular/core';
import { Platform, Events, IonSelect } from '@ionic/angular';
2.印刷类,将引用添加到select
,然后将showList
设置为true thue hide select
。还要添加setCountry()
以检索选定的国家。
@ViewChild('countryList') selectRef: IonSelect;
showList = true;
setCountry() {
console.log('New country');
}
3.在html,添加带有隐藏属性的 select
元素
<ion-select placeholder="Country" #countryList [hidden]='showList' (ionChange)='setCountry()'>
<ion-select-option value="1">Egypt</ion-select-option>
<ion-select-option value="2">Kuwait</ion-select-option>
<ion-select-option value="3">UAE</ion-select-option>
<ion-select-option value="4">Qatar</ion-select-option>
<ion-select-option value="5">Bahrain</ion-select-option>
<ion-select-option value="6">Saudi Arabia</ion-select-option>
</ion-select>
<ion-label (click)='displayCountry()'>Change</ion-label>
因此,select
元素是看不见的,单击Change
将显示以选择的国家列表。
下面的代码工作。
在模板(html(中
<ion-button (click)="openSelectList()"></ion-button>
<ion-select #countryList (ionChange)='setCountry($event)' hidden="true">
<ion-select-option value="1">Egypt</ion-select-option>
<ion-select-option value="2">Kuwait</ion-select-option>
</ion-select>
in .ts
@ViewChild('countryList') selectRef: IonSelect;
...
openSelectionList() {
setTimeout(()=>{
this.selectRef.open();
}, 2);
}
setCountry(event) { console.log('Selected country is ', event.detail.value) }