我使用的是 Ionic v2，显示页面时无法设置所选值。
<ion-select [(ngModel)]="company.form">
<ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>
我也尝试过使用
checkedCordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
如果处理默认值异或对象，最干净的方法是为 [compareWith] 属性提供比较函数。该函数在参数中接受 2 个对象，如果它们相等则返回 true。这样，模型中的现有值将在开始时被选择。如果在选择之外的模型中添加新数据，这也适用。
以下示例取自官方 Ionic 文档
<ion-item>
<ion-label>Employee</ion-label>
<ion-select [(ngModel)]="employee" [compareWith]="compareFn">
<ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
</ion-select>
</ion-item>
compareFn(e1: Employee, e2: Employee): boolean {
return e1 && e2 ? e1.id == e2.id : e1 == e2;
}
编辑：使用双等号使其适用于 Ionic 4（正如 Stan Kurdziel 在评论中建议的那样）
问题似乎是 ion-option 不喜欢 rc3 中的对象。我必须仅使用对象的 id 部分，并编写一个单独的更改处理程序来查找所需的对象并将其设置为值。
<ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
<ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
</ion-select>
还有变更处理程序：
companyFormSelected(newform) {
let selectedForm = this.forms.find((f)=>{
return f.id === newform;
});
this.company.form=selectedForm;
}
这似乎是 rc3 中的一个错误，但我不知道在哪里可以报告错误。我确实在离子论坛上打开了一个主题。
<ion-select [(ngModel)]="name">// binding the value available from ts file
<ion-option *ngFor="let form of forms; let idx = index" [value]="form.name" selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>
在你的 ts 文件中
name = this.forms[0].name //assign the variable name to the first index of your array
这对我有用。
在 HTML 中：
<ion-select [(ngModel)]="company.form">
<ion-option value="frm1"> Form 1 </ion-option>
<ion-option value="frm2"> Form 2 </ion-option>
</ion-select>
在 ts 中：
company = {
form:null
};
constructor(){
this.company.form = "frm1";
}
<ion-select ([ngModel])="dropdown1">
<ion-select-option value="1">Item1</ion-select-option>
<ion-select-option value="2">Item2</ion-select-option>
</ion-select>
以下内容将不起作用：
dropdown1 = 2;
但是以下方法会起作用：
dropdown1 = 2 + "";
选择选项值被视为字符串，因此您应该将字符串值分配给模型变量，以便比较不会失败。
您不需要使用选定的属性或[选定]，这是没有必要的
<ion-select [(ngModel)]="company.form.id" name="company.form.id">
<ion-option *ngFor="let form of forms" value="{{ form.id }}">
{{ form.name }}
</ion-option>
</ion-select>
长话短说，并引用离子文档（始终引用原始来源）： “选择应该与子元素一起使用。如果子元素没有被赋予 value 属性，那么它的 text 将被用作 value。 如果在 上设置了 value，则将根据该 value 选择所选选项。”
...因此...确保您的 ionic-select 和 ionic-select-option 上的 value 属性在代码中引用相同的 javascript object.attribute...基本上指向相同的东西。 .请参阅下面的 ionic-select 和数组级别 value="{{c.id}}" 中的页面级别属性 value="{{country.id }}" 离子选择选项
请注意，ngModel不再管理页面级别country属性生命周期
<ion-item>
<ion-select *ngIf="countries.length > 0"
(ionChange)="onCountryChaged($event)"
interface="popover"
clearInput="true"
placeholder='Country (required)'
value="{{ country.id }}">
<ion-select-option lines="none"
*ngFor="let c of countries"
value="{{ c.id }}"> {{ c.label }}
</ion-select-option>
</ion-select>
</ion-item>
Inside the .ts file we can now set *country* member programmatically
Page:constructor();
this.platform.ready().then(async () => {
this.getCountries(); //load list of countries from provider
this.country = this.navDataService.getCountry();//local data store to save state between pages
}).catch(error => { });
Page:EventHandler onCountryChaged(event): void {
let id = event.detail.value;
this.country = this.countries.find( item => item.id == id ) ;
this.navDataService.setCountry(this.country);
}
在离子选项内，你可以做
<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>
in html---->
<ion-item text-center >
<ion-select [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" >
<ion-option *ngFor="let q of questionArray let i=index" selected="{{(i==defaultSelectQuestion).toString()}}" >
{{q}}
</ion-option>
</ion-select>
</ion-item>
in ts---->
//if u dont want any default selection
this.defaultSelectQuestion = -1;
//if first element should be your default selection
this.defaultSelectQuestion = 0;
this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]
角度解决方案：
html：
<form [formGroup]="formName">
<ion-item>
<ion-select label="Label" label-placement="floating" formControlName="formControleName" [value]="" >
<ion-select-option *ngFor="let value of values" [value]="value">
{{ item}}
</ion-select-option>
</ion-select>
</ion-item>
</form>
ts：
let values = ["value1", "value2", "value3"]
let defaultVlaue = "value2"
this.formName = new FormGroup(
{
formControleName: new FormControl(defaultvalue, [Validators.required])
}
)