随着 Angular 被越来越多项目所采用，如何实现表格的排序和筛选成为了一个必备的功能之一。本文将详细介绍如何在 Angular 应用程序中实现这两个功能，并提供示例代码供读者学习和参考。
表格排序
表格排序是指按照某个字段对表格进行升序或降序排列的功能。在 Angular 应用程序中，可以通过下面几个步骤来实现：
首先，需要在组件中定义表格数据以及排序方式。例如：
-- -------------------- ---- -------
------------
--------- ---------------
------------ ----------------------------
---------- ----------------------------
--
------ ----- ---------------- ---------- ------ -
--------- - -
------ ---- ---- ----
------ ---- ---- ----
------ ---- ---- ----
------ ---- ---- ----
--
----------- ------ - ---
-------------- ------ - ------
---------- -
-
-这里我们定义了一个 tableData 数组用于存储表格的数据，以及 sortColumn 和 sortDirection 两个变量用于存储当前排序的列和方向。
接下来，在 HTML 模板中展示表格，并为表格头添加点击事件来触发排序操作。例如：
-- -------------------- ---- -------
-------
-------
----
--- --------------------------------
--- ------------------------------
-----
--------
-------
--- ----------- ---- -- --------- - ----------------------------------
----------------------
---------------------
-----
--------
--------这里用到了 Angular 中的管道（Pipes），在 *ngFor 中使用 orderBy 管道对表格进行排序，排序的属性由 sortColumn 变量控制，排序方向由 sortDirection 变量控制。
最后，定义 sort 方法用于实现排序逻辑。例如：
sort(columnName: string) {
if (columnName === this.sortColumn) {
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
} else {
this.sortColumn = columnName;
this.sortDirection = 'asc';
}
}这里的逻辑是如果当前选中的列与原先排序的列相同，则切换排序方向，否则重新排序，并将排序列设为当前选中列，排序方向设为升序。
至此，我们就实现了表格排序的功能。
表格筛选
表格筛选是指根据条件来过滤表格数据的功能。在 Angular 应用程序中，可以通过下面几个步骤来实现：
首先，在组件中定义筛选条件以及过滤后的数据。例如：
-- -------------------- ---- -------
------------
--------- ---------------
------------ ----------------------------
---------- ----------------------------
--
------ ----- ---------------- ---------- ------ -
--------- - -
------ ---- ---- ----
------ ---- ---- ----
------ ---- ---- ----
------ ---- ---- ----
--
------------- - -
----- ---
---- --
--
------------ - ---
---------- -
--------------
-
-这里定义了 tableData 数组用于存储表格数据，filterOptions 对象用于存储筛选条件，filteredData 数组用于存储筛选后的数据。
接下来，在 HTML 模板中展示表格，并为输入框绑定 ngModel，实现双向绑定。例如：
-- -------------------- ---- -------
-------
-------
----
-------------
------------
-----
----
---------- --------------------------------------
---------- -------------------------------------
-----
--------
-------
--- ----------- ---- -- --------------
----------------------
---------------------
-----
--------
--------这里我们为每个表头添加一个输入框，用于输入筛选条件，并将输入框的值与 filterOptions 中对应的属性双向绑定，这样当输入框的值发生变化时，filterOptions 对象会自动更新。
最后，在组件中定义 filter 方法用于实现筛选逻辑。例如：
-- -------------------- ---- -------
-------- -
----------------- - -------------------------- -- -
--- ---- - -----
--------- --- -- ------------------- -
-- --------------------------------------- -- ------------------------ -
---- - ---- -- ---------- - ---------------------------------------------------------------- --- ---
-
-
------ -----
---
-这里的逻辑是对 tableData 数组进行筛选，筛选条件由 filterOptions 对象中的属性控制，如果一个属性的值不为空，则筛选时只保留该属性与筛选条件匹配的数据；如果一个属性的值为空，则筛选时保留所有数据。
当筛选条件发生改变时，调用 filter 方法重新筛选数据，并将筛选结果保存在 filteredData 数组中，这样模板中的表格就会更新。
至此，我们就实现了表格筛选的功能。
总结
在 Angular 应用程序中实现表格排序和筛选，是开发中经常遇到的问题。本文介绍了具体的实现方法，当然在不同的场景下还有不同的细节和技巧需要掌握。读者可以根据本文提供的思路，自行实践并调整，以实现适合自己的表格排序和筛选功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493bb1b48841e9894157d74