Angular Material

Angular Material select API 参考文档

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

指令

`MatSelectTrigger`

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

Allows the user to customize the trigger that is displayed when the select has a value.

选择器： mat-select-trigger

`MatSelect`

选择器： mat-select

导出为： matSelect

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	此选择器的 Aria 标签。如果没有指定，占位符就会用作此标签。 Aria label of the select. If not specified, the placeholder will be used as label.
@Input('aria-labelledby') `ariaLabelledby: string`	用来指定 `aria-labelledby` 属性的输入属性。 Input that can be used to specify the `aria-labelledby` attribute.
@Input() `compareWith: (o1: any, o2: any) => boolean`	比较选项值和选定值的函数。第一个参数就是选项中的值。第二个参数是选定的值。应该返回一个布尔值。 Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned.
@Input() `disableOptionCentering: boolean`	是否要把活动选项置于触发器的中心位置。 Whether to center the active option over the trigger.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `errorStateMatcher: ErrorStateMatcher`	用于控制何时显示错误信息的对象。 Object used to control when error messages are shown.
@Input() `id: string`	元素的唯一 id。 Unique id of the element.
@Input() `multiple: boolean`	是否允许用户选择多个选项。 Whether the user should be allowed to select multiple options.
@Input() `panelClass: string \| string[] \| Set<string> \| { [key: string]: any; }`	要传递给选择器面板的类。语法与 `ngClass` 相同。 Classes to be passed to the select panel. Supports the same syntax as `ngClass`.
@Input() `placeholder: string`	如果没有选定任何值，就会显示此占位符。 Placeholder to be shown if no value has been selected.
@Input() `required: boolean`	该组件是否必填项。 Whether the component is required.
@Input() `sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number`	函数用于对多选模式选择器中的值进行排序。与 `Array.prototype.sort` 的逻辑相同。 Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
@Input() `typeaheadDebounceInterval: number`	在将焦点移动到某个条目之前，最后一次按键后要等待的时间（以毫秒为单位）。 Time to wait in milliseconds after the last keystroke before moving focus to an item.
@Input() `value: any`	选择器控件的值。 Value of the select control.
@Output() `openedChange: EventEmitter<boolean>`	切换选择器面板时会发生事件。 Event emitted when the select panel has been toggled.
@Output() `selectionChange: EventEmitter<C>`	当用户更改了选定值时发出的事件。 Event emitted when the selected value has been changed by the user.
`controlType: 'mat-select'`	这个控件的名字，可以被 `mat-form-field` 使用。 A name for this control that can be used by `mat-form-field`.
`customTrigger: MatSelectTrigger`
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`empty: boolean`	此选择器是否有值。 Whether the select has a value.
`errorState: boolean`
`focused: boolean`	此选择器是否拥有焦点。 Whether the select is focused.
`ngControl: NgControl`
`optionGroups: QueryList<MatOptgroup>`
`optionSelectionChanges: Observable<MatOptionSelectionChange>`	所有子选项的 'change' 事件的组合流。 Combined stream of all of the child options' change events.
`options: QueryList<MatOption>`
`panel: ElementRef`	包含选择器选项的面板。 Panel containing the select options.
`panelOpen: boolean`	浮层面板是否打开了。 Whether or not the overlay panel is open.
`selected: MatOption \| MatOption[]`	当前选定的选项。 The currently selected option.
`stateChanges: Subject<void>`
`trigger: ElementRef`	用于打开选择器的触发器。 Trigger that opens the select.
`triggerValue: string`	触发器中显示的值。 The value displayed in the trigger.

方法

close
关闭浮层窗格并让宿主元素获得焦点。 Closes the overlay panel and focuses the host element.

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

Closes the overlay panel and focuses the host element.

focus

focus
让此选择器元素获得焦点。 Focuses the select element.
options? `FocusOptions`

让此选择器元素获得焦点。

Focuses the select element.

参数

Parameters

options?

FocusOptions

open

toggle
浮层面板是否打开或关闭。 Toggles the overlay panel open or closed.

toggle

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

Toggles the overlay panel open or closed.

updateErrorState

类

`MatSelectChange`

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

Change event object that is emitted when the select value has changed.

属性

名称	描述
`source: MatSelect`	Reference to the select that emitted the change event.
`value: any`	Current value of the select that emitted the event.

接口

`MatSelectConfig`

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

Object that can be used to configure the default options for the select module.

属性

名称描述

名称	描述
`disableOptionCentering: boolean`	是否应禁止选项居中。 Whether option centering should be disabled.
`overlayPanelClass: string \| string[]`	要应用于菜单浮层面板的类或类列表。 Class or list of classes to be applied to the menu's overlay panel.
`typeaheadDebounceInterval: number`	在将焦点移动到某个条目前，在最后一次按键后要等待的时间（以毫秒为单位）。 Time to wait in milliseconds after the last keystroke before moving focus to an item.

disableOptionCentering: boolean

是否应禁止选项居中。

Whether option centering should be disabled.

overlayPanelClass: string | string[]

要应用于菜单浮层面板的类或类列表。

Class or list of classes to be applied to the menu's overlay panel.

typeaheadDebounceInterval: number

在将焦点移动到某个条目前，在最后一次按键后要等待的时间（以毫秒为单位）。

Time to wait in milliseconds after the last keystroke before moving focus to an item.

常量

`SELECT_PANEL_MAX_HEIGHT`

已弃用

选择器浮层面板的最大高度。

The max height of the select's overlay panel.

const SELECT_PANEL_MAX_HEIGHT: 256;

`SELECT_PANEL_PADDING_X`

已弃用

面板在 x 轴上的衬距。

The panel's padding on the x-axis.

const SELECT_PANEL_PADDING_X: 16;

`SELECT_PANEL_INDENT_PADDING_X`

已弃用

面板的 x 轴上的衬距（如果它是缩进的）（比如有一个选项组）。

The panel's x axis padding if it is indented (e.g. there is an option group).

const SELECT_PANEL_INDENT_PADDING_X: number;

`SELECT_ITEM_HEIGHT_EM`

已弃用

选择器条目以 em 为单位的高度。

The height of the select items in em units.

const SELECT_ITEM_HEIGHT_EM: 3;

`SELECT_MULTIPLE_PANEL_PADDING_X`

已弃用

面板边缘与多选模式下的选项文本之间的距离。

Distance between the panel edge and the option text in multi-selection mode.

计算公式为：(SELECT_PANEL_PADDING_X * 1.5) + 16 = 40 衬距值要乘以 1.5，因为复选框的边距是衬距的一半。复选框的宽度是 16px。

Calculated as: (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40 The padding is multiplied by 1.5 because the checkbox's margin is half the padding. The checkbox width is 16px.

const SELECT_MULTIPLE_PANEL_PADDING_X: number;

`SELECT_PANEL_VIEWPORT_PADDING`

已弃用

当选择器面板位于此值或远离视口边界时，它只会“适应”视口的内部。

The select panel will only "fit" inside the viewport if it is positioned at this value or more away from the viewport boundary.

const SELECT_PANEL_VIEWPORT_PADDING: 8;

`MAT_SELECT_SCROLL_STRATEGY`

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

Injection token that determines the scroll handling while a select is open.

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

`MAT_SELECT_CONFIG`

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

Injection token that can be used to provide the default options the select module.

const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;

`MAT_SELECT_TRIGGER`

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

Injection token that can be used to reference instances of MatSelectTrigger. It serves as alternative token to the actual MatSelectTrigger class which could cause unnecessary retention of the class and its directive metadata.

const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;

Angular Material select-testing API 参考文档

import {MatSelectHarness} from '@angular/material/select/testing';

类

`MatSelectHarness` extends MatFormFieldControlHarness

在测试中用来与标准 mat-select 进行交互的测试工具。

Harness for interacting with a standard mat-select in tests.

方法

异步 blur
Blurs the select and returns a void promise that indicates when the action is complete.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the select and returns a void promise that indicates when the action is complete.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 clickOptions
Clicks the options that match the passed-in filter. If the select is in multi-selection mode all options will be clicked, otherwise the harness will pick the first matching option.
参数 Parameters
filter `OptionHarnessFilters = {}`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

异步 close
Closes the select's panel.
`Promise<void>`	Promise that resolves when the action completes.

异步

Closes the select's panel.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 focus
Focuses the select and returns a void promise that indicates when the action is complete.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

Focuses the select and returns a void promise that indicates when the action is complete.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 getOptionGroups
Gets the groups of options inside the panel.
参数 Parameters
filter `Pick<OptgroupHarnessFilters, "selector" \| "labelText"> = {}`
返回值 Returns
`Promise<MatOptgroupHarness[]>`

异步 getOptions
Gets the options inside the select panel.
参数 Parameters
filter `Pick<OptionHarnessFilters, "text" \| "isSelected" \| "selector"> = {}`
返回值 Returns
`Promise<MatOptionHarness[]>`

异步 getValueText
Gets a promise for the select's value text.
`Promise<string>`

异步

getValueText

Gets a promise for the select's value text.

返回值

Returns

Promise<string>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

异步 isDisabled
Gets a boolean promise indicating if the select is disabled.
`Promise<boolean>`

异步

isDisabled

Gets a boolean promise indicating if the select is disabled.

返回值

Returns

Promise<boolean>

异步 isEmpty
Gets a boolean promise indicating if the select is empty (no value is selected).
`Promise<boolean>`

异步

isEmpty

Gets a boolean promise indicating if the select is empty (no value is selected).

返回值

Returns

Promise<boolean>

异步 isFocused
此选择器是否拥有焦点。 Whether the select is focused.
`Promise<boolean>`

异步

isFocused

此选择器是否拥有焦点。

Whether the select is focused.

返回值

Returns

Promise<boolean>

异步 isMultiple
Gets a boolean promise indicating if the select is in multi-selection mode.
`Promise<boolean>`

异步

isMultiple

Gets a boolean promise indicating if the select is in multi-selection mode.

返回值

Returns

Promise<boolean>

异步 isOpen
Gets whether the select is open.
`Promise<boolean>`

异步

isOpen

Gets whether the select is open.

返回值

Returns

Promise<boolean>

异步 isRequired
Gets a boolean promise indicating if the select is required.
`Promise<boolean>`

异步

isRequired

Gets a boolean promise indicating if the select is required.

返回值

Returns

Promise<boolean>

异步 isValid
Gets a boolean promise indicating if the select is valid.
`Promise<boolean>`

异步

isValid

Gets a boolean promise indicating if the select is valid.

返回值

Returns

Promise<boolean>

异步 open
Opens the select's panel.
`Promise<void>`	Promise that resolves when the action completes.

异步

open

Opens the select's panel.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

接口

`SelectHarnessFilters`

A set of criteria that can be used to filter a list of MatSelectHarness instances.

选择框 API 目录

Testing

Angular Material select API 参考文档

link 指令

link MatSelectTrigger

link MatSelect

属性

方法

link 类

link MatSelectChange

属性

link 接口

link MatSelectConfig

属性

link 常量

link SELECT_PANEL_MAX_HEIGHT

link SELECT_PANEL_PADDING_X

link SELECT_PANEL_INDENT_PADDING_X

link SELECT_ITEM_HEIGHT_EM

link SELECT_MULTIPLE_PANEL_PADDING_X

link SELECT_PANEL_VIEWPORT_PADDING

link MAT_SELECT_SCROLL_STRATEGY

link MAT_SELECT_CONFIG

link MAT_SELECT_TRIGGER

Angular Material select-testing API 参考文档

link 类

link MatSelectHarness extends MatFormFieldControlHarness

方法

link 接口

link SelectHarnessFilters

指令

`MatSelectTrigger`

`MatSelect`

类

`MatSelectChange`

接口

`MatSelectConfig`

常量

`SELECT_PANEL_MAX_HEIGHT`

`SELECT_PANEL_PADDING_X`

`SELECT_PANEL_INDENT_PADDING_X`

`SELECT_ITEM_HEIGHT_EM`

`SELECT_MULTIPLE_PANEL_PADDING_X`

`SELECT_PANEL_VIEWPORT_PADDING`

`MAT_SELECT_SCROLL_STRATEGY`

`MAT_SELECT_CONFIG`

`MAT_SELECT_TRIGGER`

类

`MatSelectHarness` extends MatFormFieldControlHarness

接口

`SelectHarnessFilters`