Angular Material 表格的 API 参考

import {MatTableModule} from '@angular/material/table';

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

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

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

Exported as: matTable
属性
名称 描述
@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: false

改写在 CdkTable 每个粘性单元元素上添加 position: sticky 的需求。

stickyCssClass: 'mat-mdc-table-sticky'

CdkTable 设置的粘性 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 流发出一个新的数据数组时，都会自动调用它。如果你的数据是数组，那么就需要手动调用这个函数来渲染任何变化。
setNoDataRow

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

noDataRow

CdkNoDataRow

updateStickyColumnStyles

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

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

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

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

选择器： [matCellDef]

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

选择器： [matHeaderCellDef]

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

选择器： [matFooterCellDef]

mat-table 的列定义。定义一组可用于表列的单元格。

选择器： [matColumnDef]

属性
名称 描述
@Input('matColumnDef')

name: string

这个列的唯一名称。
@Input({ transform: booleanAttribute })

sticky: boolean

单元格是否固定。
@Input({ transform: booleanAttribute })

stickyEnd: boolean

此列是否应粘性在该行的末尾。应该确保它模仿了混入接口 CanStick，当该值更改后必须把 _hasStickyChanged 设为 true。

cssClassFriendlyName: string

列名的转换后版本，可以作为 CSS 类名的一部分。只允许字母、数字和两个特殊字符 “-” 和 “_”。除此之外的字符都会替换为 “-”。
方法
hasStickyChanged

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

resetStickyChanged

重置固定更改状态。

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

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

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

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

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

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

mat-table 的表头行定义。存放表头行的模板和其他表头属性，比如要显示的列。

选择器： [matHeaderRowDef]

属性
名称 描述
@Input(matHeaderRowDef)

columns: Iterable<string>

要在行上显示的列。
@Input(matHeaderRowDefSticky)

sticky: boolean

行是否固定。
方法
extractCellTemplate

从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数

column

CdkColumnDef

返回值
TemplateRef<any>

getColumnsDiff

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

hasStickyChanged

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

resetStickyChanged

重置固定更改状态。

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

选择器： [matFooterRowDef]

属性
名称 描述
@Input(matFooterRowDef)

columns: Iterable<string>

要在行上显示的列。
@Input(matFooterRowDefSticky)

sticky: boolean

行是否固定。
方法
extractCellTemplate

从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数

column

CdkColumnDef

返回值
TemplateRef<any>

getColumnsDiff

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

hasStickyChanged

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

resetStickyChanged

重置固定更改状态。

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

选择器： [matRowDef]

属性
名称 描述
@Input(matRowDefColumns)

columns: Iterable<string>

要在行上显示的列。
@Input(matRowDefWhen)

when: (index: number, rowData: T) => boolean

如果要把这个行模板用于所提供的索引和行数据，该函数应返回 true。如果未定义，那么当该函数对该数据返回 true 时，该行将被认为是默认的行模板。对于每一行，必须至少有一个函数能通过或者为 undefined 以便作为默认值。
方法
extractCellTemplate

从提供的列定义中获取对此行的定义有用的相关单元格模板。
参数

column

CdkColumnDef

返回值
TemplateRef<any>

getColumnsDiff

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

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

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

Exported as: matHeaderRow

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

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

Exported as: matFooterRow

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

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

Exported as: matRow

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

选择器： ng-template[matNoDataRow]

属性
名称 描述

templateRef: TemplateRef<any>

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

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

选择器： mat-text-column

属性
名称 描述
@Input()

dataAccessor: (data: T, name: string) => string

访问器函数用来检索为要每个单元格渲染的数据。如果未设置此属性，数据单元格将渲染数据属性中与该列名匹配的值。 例如，如果列的名字是 id，那么渲染的值就是 data 的 id 属性定义的值。
@Input()

headerText: string

要作为列表头的文本标签。如果未设置此属性，则表头文本默认使用列名的首字母大写形式。
@Input()

justify: 'start' | 'end' | 'center'

单元格中值的对齐方式。
@Input()

name: string

要用来引用这个列的列名。

可接受客户端数据的数据源，包括原生支持的过滤、排序（使用 MatSort）和分页（使用 MatPaginator）。

可以通过改写 sortingDataAccessor 来进行自定义排序，它定义了要如何访问数据属性。 还允许通过改写 filterTermAccessor 来自定义过滤器，它定义了要如何将行数据转换成字符串以进行过滤匹配。

注意：这个类是一个简单的数据源，可以帮助你入门。因此，它无法处理某些更高级的案例，比如提供强大的 i18n 支持或服务器端交互。 如果你的应用需要支持更高级的用例，可以考虑实现自己的 DataSource。

属性
名称 描述

data: T[]

要由表格渲染的数据数组，其中每个对象代表一行。

filter: string

要用来从数据数组中过滤对象的过滤器关键词。 要改写数据对象与此过滤器字符串的匹配方式，请为 filterPredicate 提供一个自定义函数。

filterPredicate: (data: T, filter: string) => boolean

检查数据对象是否与数据源的过滤字符串匹配。默认情况下，会把每个数据对象都转换为其属性的字符串，如果该过滤器在该字符串中至少出现过一次，则返回 true。默认情况下，会修剪掉过滤字符串的空白，并且匹配时不区分大小写。可以改写为过滤器匹配算法的自定义实现。

filteredData: T[]

通过过滤器字符串过滤过的数据集，如果没有过滤器，则全是数据。 需要知道表格所展现的数据集时，这非常有用。比如，'selectAll()' 函数可能会想给用户展示一组过滤过的数据，而不是所有的数据。

paginator: P | null

该表格使用的 MatPaginator 组件实例，用来控制要显示哪页数据。MatPaginator 发出的页面更改会触发表格渲染数据的更新。

注意，数据源会使用此分页器的属性来计算应该显示哪个页面的数据。如果分页器要通过模板输入接收其属性，比如 [pageLength]=100 或者 [pageIndex]=1，那就要确保此分页器的视图已经初始化了，然后再赋值给这个数据源。

sort: MatSort | null

该表格使用 MatSort 指令的实例来控制它的排序。MatSort 发出的排序变化会触发对该表格所渲染数据的更新。

sortData: (data: T[], sort: MatSort) => T[]

根据 MatSort 的状态获取一个数据数组的已排序副本。在对已过滤的数据进行更改或从 MatSort 发出排序更改时调用。 默认情况下，使用该函数检索主动排序及其方向，并借助 sortingDataAccessor 检索数据来进行比较。可以改写为自定义的数据排序实现。

sortingDataAccessor: (data: T, sortHeaderId: string) => string | number

数据访问器函数，用于访问数据属性，以便通过默认的 sortData 函数进行排序。 这个默认函数假设排序头的 ID（默认为列名）与数据的属性相匹配（比如列 Xyz 对应 data['Xyz']）。可以为不同的行为设置同一个自定义函数。