![](/img/trans.png)
[英]Set default value on md-select When Value is an Object Angular4 Angular-Material
[英]Angular Material md-select default selected value
我正在使用 Angular 2 和Angular Material 。 查看文档,我试图让选择具有与空占位符相反的默认值。
我尝试了以下两个选项,它们都没有设置默认值
<md-select selected="1">
<md-option value="1" >One</md-option>
<md-option value="2">Two</md-option>
</md-select>
<md-select>
<md-option value="1" selected="true">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
我查看了所有文档和示例,但都没有帮助。
使用[(ngModel)]
:
<mat-select [(ngModel)]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
零件:
selectedOption = '1';
编辑#1:
由于Material2.0.0#beta10 (特别是这个 PR ),您可以使用MatSelect
的value
属性选择一个值:
<mat-select [value]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
零件:
selectedOption = '1';
请注意,您也可以将它与双向数据绑定 -> [(value)]一起使用。
<mat-select [value]="0" >
我们可以很容易地使用将值设置为默认值来做到这一点
根据文档,您可以通过以下方式进行操作。
选项1
<md-select value={{ defaultValue }}>
<md-option value="{{ defaultValue }}">{{defaultValue}}</md-option>
<md-option value="1">One</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
选项:2
<md-select value="None">
<md-option value="None">None</md-option>
<md-option value="1">One</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
它必须是选择下拉列表的任何值。 否则它将无法正常工作。
<mat-select formControlName="timezone" required [(ngModel)]="selectedOption">
<mat-option *ngFor="let item of array" [value]="item.value">{{item.name}}</mat-option>
</mat-select>
为了正确工作需要绑定值[value]
否则它不起作用
如果您使用的是响应式表单,您可以这样做:
在您的模板中:
<mat-form-field>
<mat-label>Sexo</mat-label>
<mat-select [formControlName]="'sex'" #sexField>
<mat-option value="2">Masculino</mat-option>
<mat-option value="1">Femenino</mat-option>
<mat-option value="3">Otro</mat-option>
</mat-select>
</mat-form-field>
并在您的组件中:
form: FormGroup;
constructor(private _formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this._formBuilder.group({
sex: ['2'], // set default option
});
if (weAreEditing) {
this.form.controls['sex'].setValue(edit.sex.id + ''); // set the option that you want
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.