Angular 2,将默认值设置为选择选项
我尝试将一个默认值添加到一个选项。 它将像一种占位符,我使用这种方法来做到这一点。 在纯HTML中它可以工作,但是如果我尝试使用角度2属性的*ngFor
,它不会选择任何内容。
在这里我使用纯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模板:
<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
}
]
}
}
我希望Select Language
作为默认值。 它已禁用但未选中。
我如何选择它作为默认值?
现场示例
更新
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
的实例不需要是相同的对象,但可以传递自定义比较函数,例如可以将具有相同属性值的不同对象实例进行匹配。
原版的
如果你想使用一个对象作为值,你需要在选项元素上使用[ngValue]
。
<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)]="..."
的选项值时,这个选项默认选择一个:
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];
}
}
我发现删除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>
尝试下面的示例代码:
更换yourValue
您要选择默认的任何值
<select placeholder="country" >
<option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
{{country.country_name}}
</option>
</select>
链接地址: http://www.djcxy.com/p/70597.html