Angular 2,设置默认值以选择选项 [英] Angular 2, set default value to select option
问题描述
我尝试为选项添加默认值。它就像一种占位符,我使用这个方法这样做。
在纯HTML中它可以工作,但如果我尝试使用 * ngFor
of angular 2属性,它就不会选择任何东西。
I try to add a default value to an option. It will be like a kind of placeholder and I use this method to do it.
In pure HTML it work, but if I try to use *ngFor
of angular 2 attribute, it doesn't select anything.
这里是我在纯HTML中使用的代码:
Here my code that I use in pure 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>
并使用Angular模板:
And using Angular template:
<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>
该课程
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 Language
to be selected as a default value. It's disabled but not selected.
如何选择它作为默认值?
How can I select it as a default value?
< a href =http://plnkr.co/edit/fuMlp7XE8tDlDYLoOfni?p=preview =noreferrer>实例
Live example
推荐答案
更新
4.0.0-beta.6 添加 compareWith
<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;
}
这样分配给 selectedCountries $的实例c $ c>不需要是相同的对象,但可以传递自定义比较函数,例如,以便能够匹配具有相同属性值的不同对象实例。
this way the instance assigned to selectedCountries
doesn'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.
原始
如果您想将对象用作值,则需要在选项元素上使用 [ngValue]
。
If you want to use an object as value you need to use [ngValue]
on the option element.
<select name="select" id="select" [(ngModel)]="selectLanguage">
<option *ngFor="let item of selectOption" [ngValue]="item"
[disabled]="item.value==0">{{item.label}}</option>
</select>
当 selectLanguage
已分配选项值 [(ngModel)] =...
这个会默认选择一个:
When selectLanguage
has an options value assigned [(ngModel)]="..."
will this one make the one selected by default:
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];
}
}
这篇关于Angular 2,设置默认值以选择选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!