选择框 Select

select 的 API

Angular Material select API 参考文档

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

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

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

选择器: mat-select-trigger
选择器: 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.

focus

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

Focuses the select element.

参数

Parameters

options?

FocusOptions
open
toggle

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

Toggles the overlay panel open or closed.

updateErrorState

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

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.

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

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.

已弃用

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

The max height of the select's overlay panel.

const SELECT_PANEL_MAX_HEIGHT: 256;
已弃用

面板在 x 轴上的衬距。

The panel's padding on the x-axis.

const SELECT_PANEL_PADDING_X: 16;
已弃用

面板的 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;
已弃用

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

The height of the select items in em units.

const SELECT_ITEM_HEIGHT_EM: 3;
已弃用

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

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;
已弃用

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

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;

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

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

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

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

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

const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;

这个注入令牌可以用来引用 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';

在测试中用来与标准 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.

返回值

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.

返回值

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.

返回值

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.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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.

返回值

Returns

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.

返回值

Returns

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.

返回值

Returns

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.

返回值

Returns

Promise<boolean>
异步
open

Opens the select's panel.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

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