Angular Material 是基于 Angular 平台的UI组件库，为开发人员提供了许多现成的UI组件，使得开发 Web 应用程序变得更为简单和高效。其中 Angular Material 提供了丰富的数据表格组件，本篇文章将深入探讨 Angular Material 数据表格的使用。
准备工作
在开始使用 Angular Material 数据表格组件之前，需要先安装 Angular Material 库。
npm install --save @angular/material
在管理栏中的 AppModule 中导入 MatTableModule 并将其添加到 imports 列表中。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - -------------- - ---- -------------------------- ----------- ------------- - ------------ -- -------- - -------------- -------------- -- ---------- - ------------ - -- ------ ----- --------- - -
搭建数据表格
数据模型
首先，我们需要构建一个数据模型，该模型将存储表格数据。在本例中，我们将创建一个名为 User 的模型，其中包括一个 id、一个 name 和一个 email 属性。
-- -------------------- ---- ------- ------ --------- ---- - --- ------- ----- ------- ------ ------- - ----- ------------- ------ - - ---- ----- ----- ----- --- ------ --------------------- ---- ----- ----- ----- --- ------ --------------------- ---- ----- ----- ----- --- ------ --------------------- ---- ----- ----- ----- --- ------ --------------------- ---- ----- ----- ----- --- ------ -------------------- --
搭建表格
使用 <table> 元素来创建一个基本的表格，在表格中创建表头和数据行即可。
-- -------------------- ---- -------
------ --------- --------------------------
---- ---- ------ ---
------------- --------------------
--- --------------- ---------------------------
--- -------- ---------------- ------------------------
---------------
---- -- ------ ---
------------- ------------------
--- --------------- -------------------------
--- -------- ---------------- ----------------------
---------------
---- ----- ------ ---
------------- ---------------------
--- --------------- ----------------------------
--- -------- ---------------- -------------------------
---------------
--- -------------- -----------------------------------------
--- ------- --------------- ---- -------- ------------------------
--------在上述代码中，我们创建了一个 table 元素，并指定了 mat-table 指令以使用 Angular Material 数据表格风格。在 table 元素内，我们创建了三个列：name、id 和 email。使用 ng-container 来定义每个列，并使用 matColumnDef 属性来标识每一列。在 ng-container 中，我们创建了表头和数据行，分别使用 <th> 和 <td> 元素来渲染它们。
在上述代码中，mat-header-row 指令和 matHeaderRowDef 指令用于创建表头行，mat-row 指令和 matRowDef 指令用于创建数据行。在 matHeaderRowDef 中，我们指定了要显示的列，而在 matRowDef 中，我们使用 let row 来表示数据行的每一行。
初始化数据
通过定义一个被称为 dataSource 的变量，我们为数据表格提供了数据来源。在下面的代码中，我们使用 MatTableDataSource 类来实现 dataSource 变量，并将数据模型 ELEMENT_DATA 传递给 dataSource 变量。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------------ - ---- --------------------------
------ - ---- - ---- ---------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----------------- -------- - ------ ------- ---------
----------- -------------------------
----------- ---- -
--------------- - --- ---------------------------------------
-
-增强数据表格
在搭建好数据表格之后，我们可以使用以下技巧来增强数据表格。
分页
使用 <mat-paginator> 标签来为表格添加分页功能。您需要导入 MatPaginatorModule，然后添加一个 <mat-paginator> 标签来启用分页功能。
<mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
在上述代码中，我们在mat-paginator 标签中设置了一个 pageSizeOptions 属性。此属性用于设置表格每页显示的行数。
排序
使用 <mat-sort> 元素来为表格添加排序功能，为了添加排序功能，我们需要导入 MatSortModule。然后，我们需要使用 <mat-table> 元素的 matSort 属性将表格与所提供的 MatSort 控件绑定起来。
<table mat-table [dataSource]="dataSource" matSort>
在上述代码中，我们添加了 matSort 属性，以用于与 MatSort 控件进行绑定。
过滤
使用 <mat-form-field> 和 <input> 元素来为表格添加过滤功能。 使用 matInput 特性将输入框包装在 <input> 元素中，并使用 mat-icon-button 元素添加搜索图标。
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<button mat-icon-button matSuffix>
<mat-icon>search</mat-icon>
</button>
</mat-form-field>在上述代码中，我们使用 (keyup) 事件在输入框中触发过滤器。
示例代码
最终代码如下所示：
-- -------------------- ---- -------
------ - ---------- ------- --------- - ---- ----------------
------ - ------------ - ---- ------------------------------
------ - ------- - ---- -------------------------
------ - ------------------ - ---- --------------------------
------ --------- ---- -
--- -------
----- -------
------ -------
-
----- ------------- ------ - -
---- ----- ----- ----- --- ------ ---------------------
---- ----- ----- ----- --- ------ ---------------------
---- ----- ----- ----- --- ------ ---------------------
---- ----- ----- ----- --- ------ ---------------------
---- ----- ----- ----- --- ------ --------------------
--
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
----------------- -------- - ------ ------- ---------
----------- -------------------------
------------------------ ---------- -------------
------------------- ----- --------
---------- -
--------------- - --- ---------------------------------
------------------------- - ---------------
-------------------- - ----------
-
------------------------ ------- -
----------- - -------------------
----------- - --------------------------
---------------------- - ------------
-
--- -------------------- ---- -------
------ --------- ------------------------- --------
---- -- ------ ---
------------- ------------------
--- --------------- ----------------- -----------------------
--- -------- ---------------- ----------------------
---------------
---- ---- ------ ---
------------- --------------------
--- --------------- ----------------- -------------------------
--- -------- ---------------- ------------------------
---------------
---- ----- ------ ---
------------- ---------------------
--- --------------- ----------------- --------------------------
--- -------- ---------------- -------------------------
---------------
--- -------------- -----------------------------------------
--- ------- --------------- ---- -------- ------------------------
--------
-------------- ---------------------- --- ---- -------------------------------------
----------------
------ -------- ------------------------------------------ ---------------------
------- --------------- ----------
---------------------------
---------
-----------------总结
Angular Material 数据表格提供了强大的功能，使得开发人员可以轻松创建漂亮、易于使用的数据表格。在本篇文章中，我们深入探讨了如何使用 Angular Material 创建数据表格，并添加了分页、排序和过滤器等功能，以帮助您更好地掌握 Angular Material 数据表格的使用。希望您能从中受到启发，更快更好地开发 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c2690968c7c53b074faba