角2 - 如何设置默认
我的模板是这样角2 - 如何设置默认<select>选择的选项
<select>
<option>AM</option>
<option>PM</option>
</select>
如何设置默认选择的选项AM?
旧的纯HTML的方式简单地Angular2工作,如果你不想做动态的东西:
<select>
<option selected>AM</option>
<option>PM</option>
</select>
但是以下的角2的方式,它允许你动态地分配选择的值,这可能是实用和常见用例:(您需要导入FormsModule
)
<select [(ngModel)]='selectedValue'>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
,并在你的组件类
selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here
个
以下链接可能是有用的:
https://angular.io/api/forms/NgSelectOption
https://angular.io/api/forms/NgModel
上面提到的角2的方法是模板驱动表单方法。有做同样的另一种方式是活性形式的方法描述如下:(您需要导入ReactiveFormsModule
)
<select [formControl]='control'>
<option>AM</option>
<option>PM</option>
</select>
,并在你的组件类
control = new FormControl('AM');
下面的链接可能是有用的:
这是如何标记答案?它与angular2无关! –
看看downvotes ..叹! – Sushil
<select [(ngModel)]="defaultValue">
<option>AM</option>
<option>PM</option>
</select>
export class MyComponent {
defaultValue = 'PM';
}
通常它做过类似
<select [(ngModel)]="defaultValue">
<option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>
export class MyComponent {
values = ['AM', 'PM'];
defaultValue = this.values[1];
}
提示对于非字符串值可使用`[ngValue] = “...”
<select [(ngModel)]="defaultValue">
<option [ngValue]="values[0]">AM</option>
<option [ngValue]="values[2]">PM</option>
</select>
应该工作,试试这个
<select>
<option [selected]='a=="None"'>None</option>
<option [selected]='a=="AM"'>AM</option>
<option [selected]='a=="PM"'>PM</option>
</select>
//in .ts file
a='PM'
这种方法是当你在genrating使用循环即*ngFor
你的选择的情况下,更多的,这有利于,你只需要在你的类添加[selected]
属性,绑定值
PS:这个方法是静态的高效以及动态捆绑。
我可以知道为什么downvote?这个答案错了吗? –
也许你可以使用反应形式:a_form_group.get('select_field')。patchValue(“the_value_id”),或者甚至在建立窗体时:new FormControl(“the_value_id”,/ ** Validation * /)。它适用于两种方法,并提供更多动态行为,始终考虑可重用性,验证和数据处理。我张贴了一个答案。 –
我的NgModel被分配给一个数组,我无法为数组中的每个元素设置默认值。默认情况下,这些值是未定义的,因此您可以使用该值设置默认选项值。
export class MyComponent {
someList:Array<any> = ['apples','banana','oranges'];
myModel: Array<any> = [];
}
<div *ngFor="let list of someList; let i = index;">
<select [(ngModel)]="myModel[i]" class="form-control">
<option [value]="undefined">DEFAULT</option>
<option [value]="'a'">A</option>
<option [value]="'b'">B</option>
</select>
</div>
/** All includes */
@Component({
selector: 'app-select',
template: `
<form [formGroup]="select_form">
<select *ngFor="let item of select_options"
formControlName="select_control">
<option value=="-1">Select one option ... </option>
<option value="{{item.id}}">{{item.text}}</option>
</select>
<button type="button" (click)="setActive("-1")"></button>
</form>
`
})
export class SelectComponent extends OnInit{
private select_form: FormGroup;
select_options: any[] =
[{id: 1, text: "Text 1", id: 2, text: "Text 2"}];
constructor(private builder: FormBuilder){
}
ngOnInit(){
this.init();
}
init(){
this.select_form= this.builder.group({
select_control: new FormControl("1", [/** Validation */])
});
}
setActive(active_value: string){
this.select_form.get('select_control').patchValue(active_value);
}
}
对于一个模板驱动的形式,我这样做,并得到默认的选择。
<select [(ngModel)]="defaultOption" name="identification">
<option [value]=null>Select</option>
<option *ngFor="let option of identification" [value]="option.id"> {{ option.name }} </option>
</select>
,并在component.ts文件,
identification = [
{ id: 1, name: 'Passport'},
{ id: 2, name: 'Adhaar'},
{ id: 3, name: 'Driver\'s license'},
];
defaultOption = null;
上的负载,为默认选择,我们可以得到选择。
你能设置像 AM –