Angular CDK 表格 API 参考

import {CdkTableModule} from '@angular/cdk/table';

指令

`CdkRecycleRows`

启用复写器的视图回收策略，从而减少渲染延迟。与为行设置动画的表格不兼容。

选择器： cdk-table[recycleRows] table[cdk-table][recycleRows]

`CdkTable`

一个可以渲染表头行、数据行和表尾行的数据表格。使用输入属性 dataSource 来确定要渲染的数据。这些数据既可以提供为数据数组，也可以提供为要渲染数组的 Observable 流，还提供为一个带有 connect 函数的 DataSource，该函数将返回一个发出要渲染的数组的 Observable 流。

选择器： cdk-table table[cdk-table]

Exported as: cdkTable

属性

名称	描述
@Input() `dataSource: CdkTableDataSourceInput<T>`	该表格的数据源可以通过三种方式提供（按复杂程度排序）：简单数据数组（每个对象代表格一个表格行）每当数组发生变化时都会发出数据数组的流那些实现了 connect / disconnect 接口的 `DataSource`。如果提供了数组，那么在添加、删除或移动该数组的对象时，都必须通知该表格。这可以通过调用 `renderRows()` 函数来完成，它会渲染自上次渲染表格以来的差异部分。如果数据数组的引用发生了变化，该表格会自动触发对行的更新。当提供一个可观察的流时，如果该流发出一个新的数据数组，该表格就会自动触发一次更新。最后，在提供 `DataSource` 对象时，该表格将使用 connect 函数提供的 Observable 流，并在该流发出新的数据数组值时触发更新。在表格的 ngOnDestroy 中，或者从表格中删除了数据源时，该表格会调用数据源的 `disconnect` 函数（这可能对清理在连接过程中注册的所有订阅很有帮助）。
@Input({ transform: booleanAttribute }) `fixedLayout: boolean`	是否使用固定（fixed）表格布局。启用此选项会强制让所有列宽一致，并优化渲染原生表格的粘性样式。对弹性（flex）表格无效。
@Input({ transform: booleanAttribute }) `multiTemplateDataRows: boolean`	通过计算哪些行的 'when' 谓词结果为 true 来允许其数据对象对应于多行。如果 `multiTemplateDataRows` 为 false（这是默认值），那么每个数据对象都会渲染到其谓词结果为 true 的第一行（按照表格中定义的顺序），否则就使用默认行（即没有 when 谓词的行）。
@Input() `trackBy: TrackByFunction<T>`	跟踪函数，用于检查数据变化的差异。类似于 `ngFor` 的 `trackBy` 函数。可以优化行操作，方法是根据该函数处理后的数据来标识一行，以了解该行是否应添加/删除/移动。接受带两个参数 `index` 和 `item` 的函数。
@Output() `contentChanged: EventEmitter<void>`	当表格使用来自数据源的最新数据渲染完一组数据行时发出，即使该组行是空的。
`needsPositionStickyOnElement: true`	是否要为所有粘性单元格元素手动添加 position: sticky。如果 position 是在与 stickyCssClass 值相关联的选择器中设置的，则不需要。可以被表格的子类所改写
`stickyCssClass: string`	CSS 类被添加到任何已应用了粘性定位的行或单元格中。可以被表格的子类改写。

方法

addColumnDef
添加一个未包含在内容子组件中的列定义。
参数
columnDef `CdkColumnDef`

addFooterRowDef
添加一个未包含在内容子组件中的表尾行定义。
参数
footerRowDef `CdkFooterRowDef`

addHeaderRowDef
添加一个未包含在内容子组件中的表头行定义。
参数
headerRowDef `CdkHeaderRowDef`

addRowDef
添加一个未包含在内容子组件中的行定义。
参数
rowDef `CdkRowDef<T>`

removeColumnDef
删除那些未包含在内容子组件中的列定义。
参数
columnDef `CdkColumnDef`

removeFooterRowDef
删除一个未包含在内容子组件中的表尾行定义。
参数
footerRowDef `CdkFooterRowDef`

removeHeaderRowDef
删除那些未包含在内容子组件中的表头行定义。
参数
headerRowDef `CdkHeaderRowDef`

removeRowDef
删除那些未包含在内容子组件中的行定义。
参数
rowDef `CdkRowDef<T>`

renderRows
根据表格中最新的数据集来渲染行，这些数据既可以直接输入，也可以从一个可观察的流中检索出来（直接获取或从 DataSource 获取）。检查自上次 diff 之后的数据差异，以便只进行必要的修改（添加/删除/移动行）。如果表格的数据源是 DataSource 或者 Observable，每当提供的 Observable 流发出一个新的数据数组时，都会自动调用它。如果你的数据是数组，那么就需要手动调用这个函数来渲染任何变化。

renderRows

根据表格中最新的数据集来渲染行，这些数据既可以直接输入，也可以从一个可观察的流中检索出来（直接获取或从 DataSource 获取）。检查自上次 diff 之后的数据差异，以便只进行必要的修改（添加/删除/移动行）。

如果表格的数据源是 DataSource 或者 Observable，每当提供的 Observable 流发出一个新的数据数组时，都会自动调用它。如果你的数据是数组，那么就需要手动调用这个函数来渲染任何变化。

setNoDataRow
设置一个没有包含在内容子组件中的无数据行定义。
参数
noDataRow `CdkNoDataRow`

updateStickyColumnStyles
更新列的粘性样式。首先，对于已粘附在左右两侧的单元格，重置所有已应用的样式。然后，根据每一行中每个单元格的列定义，评估哪些单元格需要粘附在左侧或右侧。当列定义的粘性属性发生变化时，会自动调用它。如果单元格内容在上述事件之外发生了变化，可以手动调用。

updateStickyFooterRowStyles
更新表尾的粘性样式。首先，对于已粘附在底部的单元格，重置所有已应用的样式。然后，评估哪些单元格需要粘附在底部。当表尾行所显示的一组列发生变化时，或者其粘性属性发生变化时，会自动调用它。如果单元格内容在上述事件之外发生了变化，可以手动调用。

updateStickyHeaderRowStyles
更新表头的粘性样式。首先，对于已粘附在顶部的单元格，重置所有已应用的样式。然后，评估哪些单元格需要粘附在上面。当表头行所显示的一组列发生变化时，或者其粘性属性发生变化时，会自动调用它。如果单元格内容在上述事件之外发生了变化，可以手动调用。

`CdkCellDef`

CDK 表格的单元格定义。存放列的数据行单元格的模板以及单元格的专有属性。

选择器： [cdkCellDef]

`CdkHeaderCellDef`

CDK 表格的表头单元格定义。存放列的表头单元格的模板以及单元格的专有属性。

选择器： [cdkHeaderCellDef]

`CdkFooterCellDef`

CDK 表格的表尾单元格定义。存放列的表尾单元格的模板以及单元格的专有属性。

选择器： [cdkFooterCellDef]

`CdkColumnDef`

CDK 表格的列定义。定义一组可用于表列的单元格。

选择器： [cdkColumnDef]

属性

名称	描述
@Input('cdkColumnDef') `name: string`	这个列的唯一名称。
@Input({ transform: booleanAttribute }) `sticky: boolean`	单元格是否固定。
@Input({ transform: booleanAttribute }) `stickyEnd: boolean`	此列是否应粘性在该行的末尾。应该确保它模仿了混入接口 `CanStick`，当该值更改后必须把 `_hasStickyChanged` 设为 true。
`cssClassFriendlyName: string`	列名的转换后版本，可以作为 CSS 类名的一部分。只允许字母、数字和两个特殊字符 “-” 和 “_”。除此之外的字符都会替换为 “-”。

方法

hasStickyChanged
固定状态是否已更改。
返回值
`boolean`

resetStickyChanged
重置固定更改状态。

`CdkHeaderCell` 继承自 BaseCdkCell

用于添加正确的类和角色的表头单元格模板容器。

选择器： cdk-header-cell th[cdk-header-cell]

`CdkFooterCell` 继承自 BaseCdkCell

用于添加正确的类和角色的表尾单元格模板容器。

选择器： cdk-footer-cell td[cdk-footer-cell]

`CdkCell` 继承自 BaseCdkCell

用于添加正确的类和角色的单元格模板容器。

选择器： cdk-cell td[cdk-cell]

`CdkHeaderRowDef` 扩展 BaseRowDef

CDK 表格的表头行定义。存放表头行的模板和其他标题属性，比如要显示的列。

选择器： [cdkHeaderRowDef]

属性

名称	描述
@Input(cdkHeaderRowDef) `columns: Iterable<string>`	要在行上显示的列。
@Input({ alias: 'cdkHeaderRowDefSticky', transform: booleanAttribute }) `sticky: boolean`	行是否固定。

方法

extractCellTemplate
从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数
column `CdkColumnDef`
返回值
`TemplateRef<any>`

getColumnsDiff
返回当前列和最后一个差分过的列之间的差异，如果没有差别，则返回 null。
返回值
`IterableChanges<any> \| null`

hasStickyChanged
固定状态是否已更改。
返回值
`boolean`

resetStickyChanged
重置固定更改状态。

`CdkFooterRowDef` 扩展 BaseRowDef

CDK 表的表尾行定义，存放表尾行的模板和其他表尾属性，比如要显示的列。

选择器： [cdkFooterRowDef]

属性

名称	描述
@Input(cdkFooterRowDef) `columns: Iterable<string>`	要在行上显示的列。
@Input({ alias: 'cdkFooterRowDefSticky', transform: booleanAttribute }) `sticky: boolean`	行是否固定。

方法

extractCellTemplate
从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数
column `CdkColumnDef`
返回值
`TemplateRef<any>`

getColumnsDiff
返回当前列和最后一个差分过的列之间的差异，如果没有差别，则返回 null。
返回值
`IterableChanges<any> \| null`

hasStickyChanged
固定状态是否已更改。
返回值
`boolean`

resetStickyChanged
重置固定更改状态。

`CdkRowDef` 继承自 BaseRowDef

CDK 表的数据行定义。存放数据行的模板和其他行属性，比如要显示的列和描述何时应该使用该行的谓词。

选择器： [cdkRowDef]

属性

名称	描述
@Input(cdkRowDefColumns) `columns: Iterable<string>`	要在行上显示的列。
@Input(cdkRowDefWhen) `when: (index: number, rowData: T) => boolean`	如果要把这个行模板用于所提供的索引和行数据，该函数应返回 true。如果未定义，那么当该函数对该数据返回 true 时，该行将被认为是默认的行模板。对于每一行，必须至少有一个函数能通过或者为 undefined 以便作为默认值。

方法

extractCellTemplate
从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数
column `CdkColumnDef`
返回值
`TemplateRef<any>`

getColumnsDiff
返回当前列和最后一个差分过的列之间的差异，如果没有差别，则返回 null。
返回值
`IterableChanges<any> \| null`

`CdkHeaderRow`

包含单元格出口地标的表头模板容器。添加合适的类和角色。

选择器： cdk-header-row tr[cdk-header-row]

`CdkFooterRow`

包含单元格出口地标的表尾模板容器。添加合适的类和角色。

选择器： cdk-footer-row tr[cdk-footer-row]

`CdkRow`

包含单元格出口地标的数据行模板容器。添加合适的类和角色。

选择器： cdk-row tr[cdk-row]

`CdkNoDataRow`

当表中没有数据时，可以用来显示一条消息的行。

选择器： ng-template[cdkNoDataRow]

属性

名称	描述
`templateRef: TemplateRef<any>`

`CdkTextColumn`

只显示表头行和行单元格的文本内容的列。假设该表正在使用原生表格实现（ <table> ）。

默认情况下，该列的名称就是表头文本和数据属性访问器。输入属性 headerText 可以改写表头文本。输入属性 dataAccessor 可以改写单元格的值。输入属性 justify 把文本对齐方式修改为对齐到开头或结尾。

选择器： cdk-text-column

属性

名称	描述
@Input() `dataAccessor: (data: T, name: string) => string`	访问器函数用来检索为要每个单元格渲染的数据。如果未设置此属性，数据单元格将渲染数据属性中与该列名匹配的值。例如，如果列的名字是 `id`，那么渲染的值就是 data 的 `id` 属性定义的值。
@Input() `headerText: string`	要作为列表头的文本标签。如果未设置此属性，则表头文本默认使用列名的首字母大写形式。
@Input() `justify: 'start' \| 'end' \| 'center'`	单元格中值的对齐方式。
@Input() `name: string`	要用来引用这个列的列名。

类

`BaseCdkCell`

单元格的基类。添加一个 CSS 类名来标识它所渲染的列。

`BaseRowDef`

CdkHeaderRowDef 和 CdkRowDef 的基类，负责处理各列的输入变更并通知表格。

属性

名称	描述
`columns: Iterable<string>`	要在行上显示的列。

方法

extractCellTemplate
从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数
column `CdkColumnDef`
返回值
`TemplateRef<any>`

getColumnsDiff
返回当前列和最后一个差分过的列之间的差异，如果没有差别，则返回 null。
返回值
`IterableChanges<any> \| null`

接口

`RowOutlet`

本接口用来为要插入的行提供出口地标。

属性

名称	描述
`viewContainer: ViewContainerRef`

`CellDef`

用于单元格定义的基本接口。存放列的单元格模板定义。

属性

名称	描述
`template: TemplateRef<any>`

`CdkCellOutletRowContext`

当 multiTemplateDataRows 为 false 时，提供给行单元格的上下文

属性

名称	描述
`$implicit: T`	该单元格所在行的数据。
`count: number`	总行数的长度。
`even: boolean`	如果此单元格包含在具有偶数索引的行中，则返回 true。
`first: boolean`	如果此单元格包含在第一行，则为 True。
`index: number`	数据对象在所提供的数据组中的索引。
`last: boolean`	如果此单元格包含在最后一行，则为 True。
`odd: boolean`	如果此单元格包含在具有奇数索引的行中，则返回 true。

`CdkCellOutletMultiRowContext`

multiTemplateDataRows 为 true 时，提供给行单元格的上下文。这个上下文与 CdkCellOutletRowContext 相同，除非单个的 index 值被置换为了 dataIndex 和 renderIndex。

属性

名称	描述
`$implicit: T`	该单元格所在行的数据。
`count: number`	总行数的长度。
`dataIndex: number`	数据对象在所提供的数据组中的索引。
`even: boolean`	如果此单元格包含在具有偶数索引的行中，则返回 true。
`first: boolean`	如果此单元格包含在第一行，则为 True。
`last: boolean`	如果此单元格包含在最后一行，则为 True。
`odd: boolean`	如果此单元格包含在具有奇数索引的行中，则返回 true。
`renderIndex: number`	该单元格所在的渲染行的索引位置。

`StickyUpdate`

属性

名称	描述
`elements: readonly (HTMLElement[] \| undefined)[]`
`offsets: StickyOffset[]`
`sizes: StickySize[]`

`StickyPositioningListener`

如果提供的话，CdkTable 在更新其粘性行和列的大小/位置等时会调用下面的方法。

方法

stickyColumnsUpdated
当 CdkTable 更新其粘性首列时调用。
参数
update `StickyUpdate`

stickyEndColumnsUpdated
当 CdkTable 更新其粘性末列时调用。
参数
update `StickyUpdate`

stickyFooterRowsUpdated
当 CdkTable 更新其粘性表尾行时调用。
参数
update `StickyUpdate`

stickyHeaderRowsUpdated
当 CdkTable 更新其粘性表头行时调用。
参数
update `StickyUpdate`

`TextColumnOptions`

CdkTextColumn 配置选项。

属性

名称	描述
`defaultDataAccessor: (data: T, name: string) => string`	默认数据访问器，如果一个都没有提供过，就用它。
`defaultHeaderTextTransform: (name: string) => string`	默认函数，如果没有提供表头文本，它就会根据列名提供表头文本。

类型别名

`CdkTableDataSourceInput`

可以被设置为 CdkTable 的数据源的可能的类型。

type CdkTableDataSourceInput = readonly T[] | DataSource<T> | Observable<readonly T[]>;

`StickyDirection`

type StickyDirection = 'top' | 'bottom' | 'left' | 'right';

`StickySize`

type StickySize = number | null | undefined;

`StickyOffset`

type StickyOffset = number | null | undefined;

常量

`CDK_ROW_TEMPLATE`

供 mat-table 使用的行模板。不应该在 Material 库之外使用。

const CDK_ROW_TEMPLATE: "<ng-container cdkCellOutlet></ng-container>";

`STICKY_POSITIONING_LISTENER`

这个注入令牌用来指定 StickyPositioningListener。

const STICKY_POSITIONING_LISTENER: InjectionToken<StickyPositioningListener>;

`TEXT_COLUMN_OPTIONS`

这个注入令牌可以用来指定文本列的选项。

const TEXT_COLUMN_OPTIONS: InjectionToken<TextColumnOptions<any>>;

Angular CDK 表格 API 参考

指令

CdkRecycleRows

CdkTable

属性

方法

CdkCellDef

CdkHeaderCellDef

CdkFooterCellDef

CdkColumnDef

属性

方法

CdkHeaderCell 继承自 BaseCdkCell

CdkFooterCell 继承自 BaseCdkCell

CdkCell 继承自 BaseCdkCell

CdkHeaderRowDef 扩展 BaseRowDef

属性

方法

CdkFooterRowDef 扩展 BaseRowDef

属性

方法

CdkRowDef 继承自 BaseRowDef

属性

方法

CdkHeaderRow

CdkFooterRow

CdkRow

CdkNoDataRow

属性

CdkTextColumn

属性

类

BaseCdkCell

BaseRowDef

属性

方法

接口

RowOutlet

属性

CellDef

属性

CdkCellOutletRowContext

属性

CdkCellOutletMultiRowContext

属性

StickyUpdate

属性

StickyPositioningListener

方法

TextColumnOptions

属性