Angular Material 表格入门

Angular Material 的自带了表格组件,其使用维护十分灵活,但是上手难度

相对原生 HTML 表格也更加繁琐。使用流程大致包括设置表格数据源、决定显

示内容、决定显示顺序三个步骤。

设置表格数据源

首先,对于一个表格,我们要获取或者构造表格将要显示的数据。一般来说是

一个一维对象数组。

如上所示,我们在组件中,定义一个公有变量 dataSource。然后在组件对应的

模板中,将其赋值给 mat-table 的 dataSource 属性。

表格“解剖”

定义完表格的数据源之后,我们就要让表格知道每列应该显示什么。为了便于

理解,我们首先对表格的内涵解剖一番。

这里我用不同颜色分别代表了一个表格中的不同元素。其中上方三个矩形代表

了表头,下方三个矩形代表了表格中每列的具体内容(下面简称为列)。

Material 表格最灵活的一点是,定义完表头和列要展示的内容之后,可以利用

内置的指令动态地改变表头和列的展示顺序。同样是上面的这些数据,我只需

代码中做简单的调整,就可以调整显示顺序为下图所示。

决定显示内容

Material 表格提供了三类指令来决定表格中元素的内容。

matColumnDef定义列名变量。在确定显示顺序时使用。

mat-header-cell 与 *matHeaderCellDef。前者控制该列 header 样式,后

者控制 header 显示名称。

mat-cell 与 *matCellDef。前者控制该列每个单元格样式,后者控制该列与

数据源哪个字段绑定。如下所示,let element 定义了 dataSource 中的一个对

象,通过指定 element.position,该列就显示为对象 position 的值。

决定显示顺序及动作

前面提到 Material 表格组件的最大特点是,列名和列内容的展现顺序都可以独

立控制。我们可以利用两类指令定义列的显示顺序及行点击之后的路由。

mat-header-row 与 *matHeaderRowDef。前者定义了表头是否出现,后

者定义了表头上列名的显示顺序。

mat-row 与 *matRowDef。前者定义了所有行上单元格样式,后者定义了列

内容的显示顺序。

*matHeaderRowDef*matRowDef 利用 displayedColumns 数组决定

显示顺序。数组中的字符串就是在上一节通过 matColumnDef 定义的列变量的

名称。假如想改变标题的显示顺序,只要修改此数组中变量名的顺序即可。

在线例子

总的来说,Angular Material 并不是一个非常好上手的组件,设计的也过于冗

余和复杂。因此推荐还是结合官方文档提供的一个在线示例 共同来理解。

相关阅读

Angular Material 表格中涉及到了大量开箱即用的指令,包括结构型指令和属

性型指令。因此这边推荐不熟悉的同学看一下结构性指令原理这篇文章,了解

一下结构型指令的相关知识。

参考文献

Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting)

发表评论

电子邮件地址不会被公开。 必填项已用*标注