Javascript Angular 2，设置默认值以选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39724161/
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
Angular 2, set default value to select option
提问by Radonirina Maminiaina
I try to add a default value to an option. It will be like a kind of placeholder and I use this methodto do it.
In pure HTML it work, but if I try to use *ngForof angular 2 attribute, it doesn't select anything.
我尝试为选项添加默认值。它就像一种占位符，我使用这种方法来做到这一点。在纯 HTML 中它可以工作，但是如果我尝试使用*ngForangular 2 属性，它不会选择任何内容。
Here my code that I use in pure HTML:
这是我在纯 HTML 中使用的代码：
<select name="select-html" id="select-html">
<option value="0" selected disabled>Select Language</option>
<option value="1">HTML</option>
<option value="2">PHP</option>
<option value="3">Javascript</option>
</select>
And using Angular template:
并使用 Angular 模板：
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption"
[selected]="item.value==0"
[disabled]="item.value==0">{{item.label}}</option>
</select>
The class is
班级是
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-form-select',
templateUrl: 'default.component.html'
})
export class DefaultComponent {
private selectOption: any;
constructor() {
this.selectOption = [
{
id: 1,
label: "Select Language",
value: 0
}, {
id: 2,
label: "HTML 5",
value: 1
}, {
id: 3,
label: "PHP",
value: 2
}, {
id: 4,
label: "Javascript",
value: 3
}
]
}
}
I want Select Languageto be selected as a default value. It's disabled but not selected.
我想Select Language被选为默认值。它已禁用但未选中。
How can I select it as a default value?
如何选择它作为默认值？
回答by Günter Z?chbauer
update
更新
4.0.0-beta.6added compareWith
添加了4.0.0-beta.6compareWith
<select [compareWith]="compareFn" [(ngModel)]="selectedCountries">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
compareFn(c1: Country, c2: Country): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
this way the instance assigned to selectedCountriesdoesn't need to be the identical object, but a custom comparison function can be passed, for example to be able to match an different object instance with identical property values.
这样分配给的实例selectedCountries不需要是相同的对象，但可以传递自定义比较函数，例如能够匹配具有相同属性值的不同对象实例。
original
原来的
If you want to use an object as value you need to use [ngValue]on the option element.
如果要将对象用作值，则需要[ngValue]在选项元素上使用。
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption" [ngValue]="item"
[disabled]="item.value==0">{{item.label}}</option>
</select>
When selectLanguagehas an options value assigned [(ngModel)]="..."will this one make the one selected by default:
当selectLanguage分配了一个选项值时[(ngModel)]="..."，默认情况下会选择这个值：
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-form-select',
templateUrl: 'default.component.html'
})
export class DefaultComponent {
private selectOption: any;
constructor() {
this.selectOption = [
{
id: 1,
label: "Select Language",
value: 0
}, {
id: 2,
label: "HTML 5",
value: 1
}, {
id: 3,
label: "PHP",
value: 2
}, {
id: 4,
label: "Javascript",
value: 3
}
];
this.selectLanguage = this.selectOption[0];
}
}
回答by Ben Schenker
I find it nicer to remove the default option from the selectOptionarray and specifying the default unselectable option separately.
我发现从selectOption数组中删除默认选项并单独指定默认的不可选择选项更好。
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option [ngValue]="undefined" disabled>Select Language</option>
<option
*ngFor="let item of selectOption"
[value]="item.value"
>
item.label
</option>
</select>
回答by Amit Bisht
Try below sample code for this:
Replace yourValuewith whatever value you want to select default
请尝试以下示例代码：
替换yourValue为您要选择的任何值默认值
<select placeholder="country" >
<option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
{{country.country_name}}
</option>
</select>
回答by Abid Hussain
<select class="form-control" [(ngModel)]="someList.key" name="key" #key="ngModel" required>
<option value="undefined" selected disabled>Select option</option>
<option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
</select>
