要将Angular Material Select设置为默认选项为第一个选项,可以使用FormControl来控制选择框的值,并设置初始值为第一个选项的值。
首先,需要在组件中导入FormControl和MatSelectModule,并在组件中创建一个FormControl实例,将其与MatSelect绑定。
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
@Component({
selector: 'app-my-component',
template: `
{{ option.viewValue }}
`,
})
export class MyComponent {
myControl = new FormControl();
options = [
{ value: 'option1', viewValue: 'Option 1' },
{ value: 'option2', viewValue: 'Option 2' },
{ value: 'option3', viewValue: 'Option 3' },
];
}
接下来,可以在组件的构造函数中设置FormControl的初始值为第一个选项的值。
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
@Component({
selector: 'app-my-component',
template: `
{{ option.viewValue }}
`,
})
export class MyComponent {
myControl = new FormControl(this.options[0].value);
options = [
{ value: 'option1', viewValue: 'Option 1' },
{ value: 'option2', viewValue: 'Option 2' },
{ value: 'option3', viewValue: 'Option 3' },
];
}
这样,Angular Material Select的默认选项将会是第一个选项。
上一篇:Angular Material Select - 预选择多个值
下一篇:Angular Material Select w/ Columns(带有列的Angular Material选择框)