Angular Material 选择组件的 API 参考

import {MatSelectModule} from '@angular/material/select';

指令

`MatSelect`

选择器： mat-select

Exported as: matSelect

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	此选择框的 aria-label。
@Input('aria-labelledby') `ariaLabelledby: string`	用于指定 `aria-labelledby` 属性的输入属性。
@Input() `compareWith: (o1: any, o2: any) => boolean`	比较选项值和选定值的函数。第一个参数就是选项中的值。第二个参数是选定的值。应该返回一个布尔值。
@Input({ transform: booleanAttribute }) `disableOptionCentering: this._defaultOptions?.disableOptionCentering ?? false`	是否要把活动选项置于触发器的中心位置。
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	是否禁用选择器中的涟漪效果。
@Input({ transform: booleanAttribute }) `disabled: boolean`	是否禁用选择器。
@Input() `errorStateMatcher: ErrorStateMatcher`	用于控制何时显示错误信息的对象。
@Input({ transform: booleanAttribute }) `hideSingleSelectionIndicator: boolean`	是否隐藏单选选项的复选标记指示器。
@Input() `id: string`	元素的唯一 id。
@Input({ transform: booleanAttribute }) `multiple: boolean`	是否允许用户选择多个选项。
@Input() `panelClass: string \| string[] \| Set<string> \| { [key: string]: any; }`	要传递给选择框面板的类。语法与 `ngClass` 相同。
@Input() `panelWidth: string \| number \| null`	面板的宽度。如果设置为 `auto`，则面板将与触发器宽度匹配。如果设置为 null 或空字符串，则面板将增长以匹配最长选项的文本。
@Input() `placeholder: string`	如果没有选定任何值，就会显示此占位符。
@Input({ transform: booleanAttribute }) `required: boolean`	该组件是否必填项。
@Input() `sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number`	函数用于对多选模式选择框中的值进行排序。与 `Array.prototype.sort` 的逻辑相同。
@Input({ transform: numberAttribute }) `typeaheadDebounceInterval: number`	在将焦点移动到某个条目之前，最后一次按键后要等待的时间（以毫秒为单位）。
@Input() `value: any`	选择框控件的值。
@Output() `openedChange: EventEmitter<boolean>`	切换选择框面板时会发生事件。
@Output() `selectionChange: EventEmitter<MatSelectChange>`	当用户更改了选定值时发出的事件。
`controlType: 'mat-select'`	这个控件的名字，可以被 `mat-form-field` 使用。
`customTrigger: MatSelectTrigger`	用户提供的触发器元素的覆盖。
`empty: boolean`	此选择框是否有值。
`errorState: boolean`	选择器是否处于错误状态。
`focused: boolean`	此选择框是否拥有焦点。
`ngControl: NgControl`
`optionGroups: QueryList<MatOptgroup>`	所有已定义的选项组。
`optionSelectionChanges: Observable<MatOptionSelectionChange>`	所有子选项的 'change' 事件的组合流。
`options: QueryList<MatOption>`	所有已定义的选择器选项。
`panel: ElementRef`	包含选择框选项的面板。
`panelOpen: boolean`	浮层面板是否打开了。
`selected: MatOption \| MatOption[]`	当前选定的选项。
`trigger: ElementRef`	用于打开选择框的触发器。
`triggerValue: string`	触发器中显示的值。

方法

close
关闭浮层窗格并让宿主元素获得焦点。

focus
让此选择框元素获得焦点。
参数
选项 ? `FocusOptions`

open
打开叠加面板。

toggle
浮层面板是否打开或关闭。

updateErrorState
刷新选择器的错误状态。

`MatSelectTrigger`

当选择框具有值时，允许用户自定义要显示的触发器。

选择器： mat-select-trigger

类

`MatSelectChange`

当选择框的值发生更改后触发的事件对象。

属性

名称	描述
`source: MatSelect`	对发出此变更事件的选择框的引用。
`value: any`	发出此事件的Current value of the select。

接口

`MatSelectConfig`

可用于配置选择框模块默认选项的对象。

属性

名称	描述
`disableOptionCentering: boolean`	是否应禁止选项居中。
`hideSingleSelectionIndicator: boolean`	是否应隐藏单选的图标指示器。
`overlayPanelClass: string \| string[]`	要应用于菜单浮层面板的类或类列表。
`panelWidth: string \| number \| null`	面板的宽度。如果设置为 `auto`，则面板将与触发器宽度匹配。如果设置为 null 或空字符串，则面板将增长以匹配最长选项的文本。
`typeaheadDebounceInterval: number`	在将焦点移动到某个条目之前，最后一次按键后要等待的时间（以毫秒为单位）。

常量

`MAT_SELECT_SCROLL_STRATEGY`

当选择框被打开时，本注入令牌决定滚动时的处理方式。

const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

`MAT_SELECT_CONFIG`

这个注入令牌可以用来为选择框模块提供默认选项。

const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;

`MAT_SELECT_TRIGGER`

这个注入令牌可以用来引用 MatSelectTrigger 的实例。它可以作为实际 MatSelectTrigger 类的备用令牌，直接使用实际类可能导致该类及其元数据无法被优化掉。

const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;