Html 如何设置离子选项的默认选择值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41146350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set default selected value of ion-option?
提问by Perrier
I'm using Ionic v2 and I can not set the selected value when showing the page.
我正在使用 Ionic v2，但在显示页面时无法设置所选值。
<ion-select [(ngModel)]="company.form">
<ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>
I've tried with checked, too but that isn't work either. How can I do this?
我也尝试过checked，但这也不起作用。我怎样才能做到这一点？
Cordova 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
采纳答案by Nicolas Janel
If you deal with default value xor objects, the cleanest way is to provide a compare function to the [compareWith] attribute. This function takes 2 objects in parameters and returns true if they are equals. This way, existing values in model will be selected at start. This works too if new data are added in model outside of the select.
如果您处理默认值 xor 对象，最简洁的方法是为 [compareWith] 属性提供一个比较函数。此函数在参数中接受 2 个对象，如果它们相等则返回 true。这样，模型中的现有值将在开始时被选择。如果在选择之外的模型中添加新数据，这也适用。
Following example is taken from official Ionic doc
以下示例取自官方 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;
}
EDIT : using double equals make it work for Ionic 4 (as Stan Kurdziel suggests in comment)
编辑：使用双等号使其适用于 Ionic 4（正如 Stan Kurdziel 在评论中建议的那样）
回答by Perrier
The problem seems to be that ion-option don't like objects in rc3. I have to work with only the id part of the object and write a seperate changehandler that find the needed object and set it as a value.
问题似乎是 ion-option 不喜欢 rc3 中的对象。我必须只使用对象的 id 部分并编写一个单独的 changehandler 来找到所需的对象并将其设置为一个值。
<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>
And the changehandler:
和变更处理程序：
companyFormSelected(newform) {
let selectedForm = this.forms.find((f)=>{
return f.id === newform;
});
this.company.form=selectedForm;
}
This seems to be a bug in rc3 but I don't know where can I report bugs. I did open a topic on ionic forum.
这似乎是 rc3 中的错误，但我不知道在哪里可以报告错误。我确实在 ionic 论坛上开了一个话题。
回答by Mohan Gopi
<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>
inside your ts file
在你的 ts 文件中
name = this.forms[0].name //assign the variable name to the first index of your array
回答by Khurshid Ansari
This is working for me.
这对我有用。
In html :
在 html 中：
<ion-select [(ngModel)]="company.form">
<ion-option value="frm1"> Form 1 </ion-option>
<ion-option value="frm2"> Form 2 </ion-option>
</ion-select>
In ts :
在 ts 中：
company = {
form:null
};
constructor(){
this.company.form = "frm1";
}
回答by 0077cc
You do not need to work with the attribute selected or [selected] it is not necessary
您不需要使用 selected 或 [selected] 属性，这是没有必要的
<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>
回答by user628176
<ion-select ([ngModel])="dropdown1">
<ion-select-option value="1">Item1</ion-select-option>
<ion-select-option value="2">Item2</ion-select-option>
</ion-select>
the following will not work:
以下将不起作用：
const a = 2; dropdown1 = a;
but the following will work:
但以下将起作用：
const a = 2; dropdown1 = a + "";
The select option values are treated as string, so you should assign string values to your model variable so that comparison will not fail.
选择选项值被视为字符串，因此您应该将字符串值分配给模型变量，以便比较不会失败。
回答by Fir
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]
回答by A. Radulescu
Inside ion-option, you can do
在 ion-option 里面，你可以做
<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>
回答by shridhar lingaraddi
ion Select tag Just Assign the array to ngModel and default value is selected. Simple
ion Select tag 只需将数组分配给 ngModel 并选择默认值。简单的
