列表 List

list 的 API

Angular Material list API 参考文档

import {MatListModule} from '@angular/material/list';

选择器: mat-nav-list
导出为: matNavList
属性
名称 描述
@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

Whether the component is disabled.

选择器: mat-list mat-action-list
导出为: matList
属性
名称 描述
@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

Whether the component is disabled.

“Material Design” 列表中的一个条目

An item within a Material Design list.

选择器: mat-list-item a[mat-list-item] button[mat-list-item]
导出为: matListItem
属性
名称 描述
@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

该选项是否被禁用。

Whether the option is disabled.

选项列表中的列表项组件。每个列表项都会自动生成一个复选框,如果当前列表项被选定了,就会把当前条目放入选项列表的 selectionModel 中。

Component for list-options of selection-list. Each list-option can automatically generate a checkbox and can put current item into the selectionModel of selection-list if the current item is selected.

选择器: mat-list-option
导出为: matListOption
属性
名称 描述
@Input()

checkboxPosition: MatListOptionCheckboxPosition

标签是出现在复选框之前还是之后。默认为'after'

Whether the label should appear before or after the checkbox. Defaults to 'after'

@Input()

color: ThemePalette

列表选项的主题颜色。这会设置复选框的颜色。

Theme color of the list option. This sets the color of the checkbox.

@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: any

该选项是否被禁用。

Whether the option is disabled.

@Input()

selected: boolean

该选项是否被选定。

Whether the option is selected.

@Input()

value: any

选项的值

Value of the option

方法
focus

可以通过编程让该选项获得焦点。

Allows for programmatic focusing of the option.

toggle

切换该选项的选定状态。

Toggles the selection state of the option.

Material Design 列表组件,每个条目都是一个可选的选项。其行为和列表框一致。

Material Design list component where each item is a selectable option. Behaves as a listbox.

选择器: mat-selection-list
导出为: matSelectionList
属性
名称 描述
@Input()

color: ThemePalette

选择列表的主题颜色。这会为所有列表中的选项设置复选框颜色。

Theme color of the selection list. This sets the checkbox color for all list options.

@Input()

compareWith: (o1: any, o2: any) => boolean

函数用于在确定哪些选项应该显示为选定状态时,比较一个选项和选定的值。第一个参数就是选项的值。第二个参数是选定值的值。必须返回一个布尔值。

Function used for comparing an option against the selected value when determining which options should appear as selected. The first argument is the value of an options. The second one is a value from the selected value. A boolean must be returned.

@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

是否禁用了选择列表。

Whether the selection list is disabled.

@Input()

multiple: boolean

选择是否限制到一个或多个条目(默认的多个)。

Whether selection is limited to one or multiple items (default multiple).

@Output()

selectionChange: EventEmitter<MatSelectionListChange>

每当选项的选定状态发生变化时,就会发出一个 change 事件。

Emits a change event whenever the selected state of an option changes.

options: QueryList<MatListOption>

这个选择列表中包含的选项组件。

The option components contained within this selection-list.

selectedOptions: SelectionModel<MatListOption>

当前选定的选项。

The currently selected options.

方法
deselectAll

取消选定所有选项。返回变化过的选项。

Deselects all of the options. Returns the options that changed as a result.

返回值

Returns

MatListOption[]
focus

让此选择列表获得焦点。

Focuses the selection list.

参数

Parameters

options?

FocusOptions
selectAll

选择所有选项。返回变化过的选项。

Selects all of the options. Returns the options that changed as a result.

返回值

Returns

MatListOption[]

当选项的某个选定状态发生变化时,就会触发这个事件。

Change event that is being fired whenever the selected state of an option changes.

属性
名称 描述

options: MatListOption[]

Reference to the options that have been changed.

source: MatSelectionList

Reference to the selection list that emitted the event.

已弃用

option: MatListOption

Reference to the option that has been changed. @deprecated Use options instead, because some events may change more than one option. @breaking-change 12.0.0

此类型描述列表中的复选框相对于列表条目文本的的可能位置。

Type describing possible positions of a checkbox in a list option with respect to the list item's text.

type MatListOptionCheckboxPosition = 'before' | 'after';

这个注入令牌可以用来注入 MatList 实例。它可以作为实际 MatList 类的备用令牌,如果使用真实类可能导致此类及其组件元数据无法优化掉。

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

const MAT_LIST: InjectionToken<MatList>;

这个注入令牌可以用来注入一些 MatNavList 实例。它可以作为实际 MatNavList 类的备用令牌,如果使用真实类可能导致此类及其组件元数据无法优化掉。

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

const MAT_NAV_LIST: InjectionToken<MatNavList>;

Angular Material list-testing API 参考文档

import {MatActionListHarness} from '@angular/material/list/testing';

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

Harness for interacting with a standard mat-action-list in tests.

方法
getItems

Gets a list of harnesses representing the items in this list. @param filters Optional filters used to narrow which harnesses are included @return The list of items matching the given filters.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[]>
getItemsGroupedByDividers

Gets a list of sub-lists representing the list items grouped by dividers. If the list has no dividers it is represented as a list with a single sub-list. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sub-lists by divider.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[][]>
getItemsGroupedBySubheader

Gets a list of ListSection representing the list items grouped by subheaders. If the list has no subheaders it is represented as a single ListSection with an undefined heading property. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sections by subheader.

参数

Parameters

filters?

F

返回值

Returns

Promise<ListSection<C>[]>
getItemsWithSubheadersAndDividers

Gets a list of harnesses representing all of the items, subheaders, and dividers (in the order they appear in the list). Use instanceof to check which type of harness a given item is. @param filters Optional filters used to narrow which list items, subheaders, and dividers are included. A value of false for the item, subheader, or divider properties indicates that the respective harness type should be omitted completely. @return The list of harnesses representing the items, subheaders, and dividers matching the given filters.

参数

Parameters

filters

{ item

返回值

Returns

Promise<[ ]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<C[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatSubheaderHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatDividerHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<(MatSubheaderHarness | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters?

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>
异步
host

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

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

返回值

Returns

Promise<TestElement>

Harness for interacting with an action list item.

方法
异步
blur

Blurs the action list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
click

Clicks on the action list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
focus

Focuses the action list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
getHarnessLoaderForContent

Gets a HarnessLoader used to get harnesses within the list item's content. @deprecated Use getChildLoader(MatListItemSection.CONTENT) or getHarness instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>
getLinesText

Gets the lines of text (mat-line elements) in this nav list item.

返回值

Returns

Promise<string[]>
getText

Gets the full text content of the list item.

返回值

Returns

Promise<string>
hasAvatar

Whether this list item has an avatar.

返回值

Returns

Promise<boolean>
hasIcon

Whether this list item has an icon.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isFocused

Whether the action list item is focused.

返回值

Returns

Promise<boolean>

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

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

方法
getItems

Gets a list of harnesses representing the items in this list. @param filters Optional filters used to narrow which harnesses are included @return The list of items matching the given filters.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[]>
getItemsGroupedByDividers

Gets a list of sub-lists representing the list items grouped by dividers. If the list has no dividers it is represented as a list with a single sub-list. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sub-lists by divider.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[][]>
getItemsGroupedBySubheader

Gets a list of ListSection representing the list items grouped by subheaders. If the list has no subheaders it is represented as a single ListSection with an undefined heading property. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sections by subheader.

参数

Parameters

filters?

F

返回值

Returns

Promise<ListSection<C>[]>
getItemsWithSubheadersAndDividers

Gets a list of harnesses representing all of the items, subheaders, and dividers (in the order they appear in the list). Use instanceof to check which type of harness a given item is. @param filters Optional filters used to narrow which list items, subheaders, and dividers are included. A value of false for the item, subheader, or divider properties indicates that the respective harness type should be omitted completely. @return The list of harnesses representing the items, subheaders, and dividers matching the given filters.

参数

Parameters

filters

{ item

返回值

Returns

Promise<[ ]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<C[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatSubheaderHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatDividerHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<(MatSubheaderHarness | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters?

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>
异步
host

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

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

返回值

Returns

Promise<TestElement>

Harness for interacting with a list item.

方法
异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
getHarnessLoaderForContent

Gets a HarnessLoader used to get harnesses within the list item's content. @deprecated Use getChildLoader(MatListItemSection.CONTENT) or getHarness instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>
getLinesText

Gets the lines of text (mat-line elements) in this nav list item.

返回值

Returns

Promise<string[]>
getText

Gets the full text content of the list item.

返回值

Returns

Promise<string>
hasAvatar

Whether this list item has an avatar.

返回值

Returns

Promise<boolean>
hasIcon

Whether this list item has an icon.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>

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

Harness for interacting with a standard mat-nav-list in tests.

方法
getItems

Gets a list of harnesses representing the items in this list. @param filters Optional filters used to narrow which harnesses are included @return The list of items matching the given filters.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[]>
getItemsGroupedByDividers

Gets a list of sub-lists representing the list items grouped by dividers. If the list has no dividers it is represented as a list with a single sub-list. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sub-lists by divider.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[][]>
getItemsGroupedBySubheader

Gets a list of ListSection representing the list items grouped by subheaders. If the list has no subheaders it is represented as a single ListSection with an undefined heading property. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sections by subheader.

参数

Parameters

filters?

F

返回值

Returns

Promise<ListSection<C>[]>
getItemsWithSubheadersAndDividers

Gets a list of harnesses representing all of the items, subheaders, and dividers (in the order they appear in the list). Use instanceof to check which type of harness a given item is. @param filters Optional filters used to narrow which list items, subheaders, and dividers are included. A value of false for the item, subheader, or divider properties indicates that the respective harness type should be omitted completely. @return The list of harnesses representing the items, subheaders, and dividers matching the given filters.

参数

Parameters

filters

{ item

返回值

Returns

Promise<[ ]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<C[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatSubheaderHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatDividerHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<(MatSubheaderHarness | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters?

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>
异步
host

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

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

返回值

Returns

Promise<TestElement>

Harness for interacting with a nav list item.

方法
异步
blur

Blurs the nav list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
click

Clicks on the nav list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
focus

Focuses the nav list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
getHarnessLoaderForContent

Gets a HarnessLoader used to get harnesses within the list item's content. @deprecated Use getChildLoader(MatListItemSection.CONTENT) or getHarness instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>
异步
getHref

Gets the href for this nav list item.

返回值

Returns

Promise<string | null>
getLinesText

Gets the lines of text (mat-line elements) in this nav list item.

返回值

Returns

Promise<string[]>
getText

Gets the full text content of the list item.

返回值

Returns

Promise<string>
hasAvatar

Whether this list item has an avatar.

返回值

Returns

Promise<boolean>
hasIcon

Whether this list item has an icon.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isFocused

Whether the nav list item is focused.

返回值

Returns

Promise<boolean>

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

Harness for interacting with a standard mat-selection-list in tests.

方法
异步
deselectItems

Deselects all items matching any of the given filters. @param filters Filters that specify which items should be deselected.

参数

Parameters

filters

...filters

ListItemHarnessFilters[]

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

getItems

Gets a list of harnesses representing the items in this list. @param filters Optional filters used to narrow which harnesses are included @return The list of items matching the given filters.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[]>
getItemsGroupedByDividers

Gets a list of sub-lists representing the list items grouped by dividers. If the list has no dividers it is represented as a list with a single sub-list. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sub-lists by divider.

参数

Parameters

filters?

F

返回值

Returns

Promise<C[][]>
getItemsGroupedBySubheader

Gets a list of ListSection representing the list items grouped by subheaders. If the list has no subheaders it is represented as a single ListSection with an undefined heading property. @param filters Optional filters used to narrow which list item harnesses are included @return The list of items matching the given filters, grouped into sections by subheader.

参数

Parameters

filters?

F

返回值

Returns

Promise<ListSection<C>[]>
getItemsWithSubheadersAndDividers

Gets a list of harnesses representing all of the items, subheaders, and dividers (in the order they appear in the list). Use instanceof to check which type of harness a given item is. @param filters Optional filters used to narrow which list items, subheaders, and dividers are included. A value of false for the item, subheader, or divider properties indicates that the respective harness type should be omitted completely. @return The list of harnesses representing the items, subheaders, and dividers matching the given filters.

参数

Parameters

filters

{ item

返回值

Returns

Promise<[ ]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<C[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatSubheaderHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<MatDividerHarness[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item?

返回值

Returns

Promise<(C | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters

{ item

返回值

Returns

Promise<(MatSubheaderHarness | MatDividerHarness)[]>
getItemsWithSubheadersAndDividers

参数

Parameters

filters?

{ item?

返回值

Returns

Promise<(C | MatSubheaderHarness | MatDividerHarness)[]>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

是否禁用了选择列表。

Whether the selection list is disabled.

返回值

Returns

Promise<boolean>
异步
selectItems

Selects all items matching any of the given filters. @param filters Filters that specify which items should be selected.

参数

Parameters

filters

...filters

ListOptionHarnessFilters[]

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

Harness for interacting with a list option.

方法
异步
blur

Blurs the list option.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
deselect

Puts the list option in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked.

异步
focus

Focuses the list option.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAllChildLoaders

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader[]>
异步
getAllHarnesses

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T[]>
异步
getCheckboxPosition

Gets the position of the checkbox relative to the list option content.

返回值

Returns

Promise<MatListOptionCheckboxPosition>
异步
getChildLoader

参数

Parameters

selector

S

返回值

Returns

Promise<HarnessLoader>
异步
getHarness

参数

Parameters

query

HarnessQuery<T>

返回值

Returns

Promise<T>
getHarnessLoaderForContent

Gets a HarnessLoader used to get harnesses within the list item's content. @deprecated Use getChildLoader(MatListItemSection.CONTENT) or getHarness instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>
getLinesText

Gets the lines of text (mat-line elements) in this nav list item.

返回值

Returns

Promise<string[]>
getText

Gets the full text content of the list item.

返回值

Returns

Promise<string>
hasAvatar

Whether this list item has an avatar.

返回值

Returns

Promise<boolean>
hasIcon

Whether this list item has an icon.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

Whether the list option is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

Whether the list option is focused.

返回值

Returns

Promise<boolean>
异步
isSelected

Whether the list option is selected.

返回值

Returns

Promise<boolean>
异步
select

Puts the list option in a checked state by toggling it if it is currently unchecked, or doing nothing if it is already checked.

异步
toggle

切换复选框的勾选状态。

Toggles the checked state of the checkbox.

属性
名称 描述

text: string | RegExp

属性
名称 描述

href: string | RegExp | null

属性
名称 描述

selected: boolean

属性
名称 描述

text: string | RegExp