Angular Material md-select 默认 selected 值
Angular Material md-select default selected value
我正在使用 Angular 2 和 Angular Material。查看文档,我试图让 select 具有默认值,而不是空占位符。
下面两个选项我都试过了,都没有设置默认值
<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 (specifically this PR) 你可以 select 使用 value
属性 共 MatSelect
:
<mat-select [value]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
分量:
selectedOption = '1';
请注意,您还可以将其与 two-way 数据绑定一起使用 -> [(value)].
<mat-select [value]="0" >
我们可以很容易地使用设置值到默认值
根据documentation,您可以通过以下方式进行。
选项: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>
它必须是 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]
否则它不起作用
如果你使用的是 Reactive Forms,你可以这样做:
在您的模板中:
<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
}
}
我正在使用 Angular 2 和 Angular Material。查看文档,我试图让 select 具有默认值,而不是空占位符。
下面两个选项我都试过了,都没有设置默认值
<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 (specifically this PR) 你可以 select 使用 value
属性 共 MatSelect
:
<mat-select [value]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
分量:
selectedOption = '1';
请注意,您还可以将其与 two-way 数据绑定一起使用 -> [(value)].
<mat-select [value]="0" >
我们可以很容易地使用设置值到默认值
根据documentation,您可以通过以下方式进行。
选项: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>
它必须是 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]
否则它不起作用
如果你使用的是 Reactive Forms,你可以这样做:
在您的模板中:
<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
}
}