直接上例子如下:
<ion-select [selectOptions]="selectOptions" [(ngModel)]="list" placeholder="请点击" okText="确定" cancelText="取消" (ionChange)="getClick(list)" >
<ion-option value="{{list.name}}" *ngFor="let list of lists">{{list.name}}</ion-option>
</ion-select>
private selectOptions:any;
//模拟循环的下拉框选项
private lists=[
{name:'11'},
{name:'22'},
{name:'33'},
{name:'44'},
{name:'55'},
{name:'66'},
];
constructor(public navCtrl: NavController) {
this.selectOptions = {
//设置头部标题
title: '请选择下列',
};
}
getClick(val){
console.log(val);
}
我们看看效果,如下:
然后我点击Home页面,再次返回About的页面的时候会发现还33,不是初始化的11!!!!
解决方案一:
声明一个和[(ngModel)]=“list”一样的变量
private list:string;
ionViewWillEnter(){
this.list='11';
}
解决方案二:
使用selectedText属性【显示的文本而不是所选选项的值。】
<ion-select [selectOptions]="selectOptions" [(ngModel)]="list" placeholder="请点击" okText="确定" cancelText="取消" (ionChange)="getClick(list)" selectedText="{{selecText}}" >
<ion-option value="{{list.name}}" *ngFor="let list of lists">{{list.name}}</ion-option>
</ion-select>
private selecText:string;
constructor(public navCtrl: NavController) {
this.selectOptions = {
//设置头部标题
title: '请选择下列',
};
}
ionViewWillEnter(){
this.selecText='请输入';
}
getClick(val){
console.log(val);
this.selecText=val;
}
顺便给大家提供一个select很有意思的属性【interface】
interface有三个值,action-sheet, popover or alert。默认是: alert。
<ion-select [selectOptions]="selectOptions" [(ngModel)]="list" placeholder="请点击" okText="确定" cancelText="取消" (ionChange)="getClick(list)" selectedText="{{selecText}}" interface='action-sheet' >
<ion-option value="{{list.name}}" *ngFor="let list of lists">{{list.name}}</ion-option>
</ion-select>