Angular Material

Angular Material list API 参考文档

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

指令

`MatNavList`

选择器： mat-nav-list

导出为： matNavList

属性

名称	描述
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.

`MatList`

选择器： mat-list mat-action-list

导出为： matList

属性

名称	描述
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.

`MatListItem`

“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.

`MatListOption`

选项列表中的列表项组件。每个列表项都会自动生成一个复选框，如果当前列表项被选定了，就会把当前条目放入选项列表的 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.

focus

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

Allows for programmatic focusing of the option.

toggle
切换该选项的选定状态。 Toggles the selection state of the option.

toggle

切换该选项的选定状态。

Toggles the selection state of the option.

`MatSelectionList`

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.

deselectAll

取消选定所有选项。

Deselects all of the options.

focus

focus
让此选择列表获得焦点。 Focuses the selection list.
options? `FocusOptions`

让此选择列表获得焦点。

Focuses the selection list.

参数

Parameters

options?

FocusOptions

selectAll
选择所有选项。 Selects all of the options.

selectAll

选择所有选项。

Selects all of the options.

类

`MatSelectionListChange`

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

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.

类型别名

`MatListOptionCheckboxPosition`

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

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

type MatListOptionCheckboxPosition = 'before' | 'after';

常量

`MAT_LIST`

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

`MAT_NAV_LIST`

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

类

`MatActionListHarness`

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

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

方法

getItems
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[]>`

getItemsGroupedByDividers
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[][]>`

getItemsGroupedBySubheader
参数 Parameters
filters? `F`
返回值 Returns
`Promise<ListSection<C>[]>`

getItemsWithSubheadersAndDividers
参数 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
获取一个代表该组件宿主元素的 `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>

`MatActionListItemHarness`

Harness for interacting with an action list item.

方法

异步 blur
Blurs the action list item.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the action list item.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 click
Clicks on the action list item.
`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.
`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

getHarnessLoaderForContent
`Promise<HarnessLoader>`

返回值

Returns

Promise<HarnessLoader>

getLinesText

getLinesText
`Promise<string[]>`

返回值

Returns

Promise<string[]>

getText

getText
`Promise<string>`

返回值

Returns

Promise<string>

hasAvatar

hasAvatar
`Promise<boolean>`

返回值

Returns

Promise<boolean>

hasIcon

hasIcon
`Promise<boolean>`

返回值

Returns

Promise<boolean>

异步 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>

异步 isFocused
Whether the action list item is focused.
`Promise<boolean>`

异步

isFocused

Whether the action list item is focused.

返回值

Returns

Promise<boolean>

`MatListHarness`

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

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

方法

getItems
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[]>`

getItemsGroupedByDividers
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[][]>`

getItemsGroupedBySubheader
参数 Parameters
filters? `F`
返回值 Returns
`Promise<ListSection<C>[]>`

getItemsWithSubheadersAndDividers
参数 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
获取一个代表该组件宿主元素的 `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>

`MatListItemHarness`

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

返回值

Returns

Promise<HarnessLoader>

getLinesText

返回值

Returns

Promise<string[]>

getText

返回值

Returns

Promise<string>

hasAvatar

返回值

Returns

Promise<boolean>

hasIcon

返回值

Returns

Promise<boolean>

异步

host

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

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

返回值

Returns

Promise<TestElement>

`MatNavListHarness`

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

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

方法

getItems
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[]>`

getItemsGroupedByDividers
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[][]>`

getItemsGroupedBySubheader
参数 Parameters
filters? `F`
返回值 Returns
`Promise<ListSection<C>[]>`

getItemsWithSubheadersAndDividers
参数 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

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

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

返回值

Returns

Promise<TestElement>

`MatNavListItemHarness`

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

返回值

Returns

Promise<HarnessLoader>

异步

getHref

Gets the href for this nav list item.

返回值

Returns

Promise<string | null>

getLinesText

返回值

Returns

Promise<string[]>

getText

返回值

Returns

Promise<string>

hasAvatar

返回值

Returns

Promise<boolean>

hasIcon

返回值

Returns

Promise<boolean>

异步

host

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

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>

`MatSelectionListHarness`

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

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

方法

异步 deselectItems
Deselects all items matching any of the given filters.
参数 Parameters
filters	Filters that specify which items should be deselected.
...filters `ListItemHarnessFilters[]`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

getItems
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[]>`

getItemsGroupedByDividers
参数 Parameters
filters? `F`
返回值 Returns
`Promise<C[][]>`

getItemsGroupedBySubheader
参数 Parameters
filters? `F`
返回值 Returns
`Promise<ListSection<C>[]>`

getItemsWithSubheadersAndDividers
参数 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

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

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.
参数 Parameters
filters	Filters that specify which items should be selected.
...filters `ListOptionHarnessFilters[]`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

`MatListOptionHarness`

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

返回值

Returns

Promise<HarnessLoader>

getLinesText

返回值

Returns

Promise<string[]>

getText

返回值

Returns

Promise<string>

hasAvatar

返回值

Returns

Promise<boolean>

hasIcon

返回值

Returns

Promise<boolean>

异步

host

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

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.

接口

`ListHarnessFilters`

`ActionListHarnessFilters`

`NavListHarnessFilters`

`SelectionListHarnessFilters`

`BaseListItemHarnessFilters`

属性

名称	描述
`text: string \| RegExp`

`ListItemHarnessFilters`

`ActionListItemHarnessFilters`

`NavListItemHarnessFilters`

属性

名称	描述
`href: string \| RegExp \| null`

`ListOptionHarnessFilters`

属性

名称	描述
`selected: boolean`

`SubheaderHarnessFilters`

属性

名称	描述
`text: string \| RegExp`

列表 API 目录

Angular Material list API 参考文档

link 指令

link MatNavList

属性

link MatList

属性

link MatListItem

属性

link MatListOption

属性

方法

link MatSelectionList

属性

方法

link 类

link MatSelectionListChange

属性

link 类型别名

link MatListOptionCheckboxPosition

link 常量

link MAT_LIST

link MAT_NAV_LIST

Angular Material list-testing API 参考文档

link 类

link MatActionListHarness

方法

link MatActionListItemHarness

方法

link MatListHarness

方法

link MatListItemHarness

方法

link MatNavListHarness

方法

link MatNavListItemHarness

方法

link MatSelectionListHarness

方法

link MatListOptionHarness

方法

link 接口

link ListHarnessFilters

link ActionListHarnessFilters

link NavListHarnessFilters

link SelectionListHarnessFilters

link BaseListItemHarnessFilters

属性

link ListItemHarnessFilters

link ActionListItemHarnessFilters

link NavListItemHarnessFilters

属性

link ListOptionHarnessFilters

属性

link SubheaderHarnessFilters

属性

指令

`MatNavList`

`MatList`

`MatListItem`

`MatListOption`

`MatSelectionList`

类

`MatSelectionListChange`

类型别名

`MatListOptionCheckboxPosition`

常量

`MAT_LIST`

`MAT_NAV_LIST`

类

`MatActionListHarness`

`MatActionListItemHarness`

`MatListHarness`

`MatListItemHarness`

`MatNavListHarness`

`MatNavListItemHarness`

`MatSelectionListHarness`

`MatListOptionHarness`

接口

`ListHarnessFilters`

`ActionListHarnessFilters`

`NavListHarnessFilters`

`SelectionListHarnessFilters`

`BaseListItemHarnessFilters`

`ListItemHarnessFilters`

`ActionListItemHarnessFilters`

`NavListItemHarnessFilters`

`ListOptionHarnessFilters`

`SubheaderHarnessFilters`