在Angular中，我们经常需要对列表或表格中的数据进行排序。通常情况下，我们可以使用Angular内置的管道（pipe）来实现这一功能。但是，当需要按照多个字段进行排序时，内置管道就无法满足我们的需求了。本文将介绍如何在Angular中按照多个字段进行排序。
orderBy pipe的限制
首先，让我们看一下Angular内置的orderBy管道。该管道允许我们按照单个字段对数组进行排序。例如，以下代码将按照name字段对people数组进行排序：
<div *ngFor="let person of people | orderBy: 'name'">{{ person.name }}</div>然而，如果我们想要按照多个字段进行排序，该管道就不再适用了。比如，如果我们想要按照age字段和name字段对people数组进行排序，内置管道就无能为力了。
使用自定义管道进行多字段排序
解决方案是创建一个自定义管道来实现按照多个字段进行排序。我们可以通过定义一个函数来实现这一目标。以下是一个简单的多字段排序函数：
-- -------------------- ---- -------
-------- --------------------- ------ ------- --------- ----------- ----------- ----- -
------ -------------- -- -- -
--- ---- - - -- - - -------------- ---- -
--- --------- - ----------
--- ---------- - --------------
-- ------------- - ------------- -
------ ---------- - - - ---
- ---- -- ------------- - ------------- -
------ ---------- - -- - --
-
-
------ --
---
-这个函数接受三个参数：要排序的数组、排序字段和排序方向。它首先按照第一个排序字段进行比较，如果两个元素相等，则按照下一个排序字段进行比较，直到所有字段都比较完毕。
我们可以将这个函数封装成一个管道，以便在模板中使用。以下是实现该管道的代码：
-- -------------------- ---- -------
------ - ----- ------------- - ---- ----------------
-------
----- --------------
--
------ ----- ---------------- ---------- ------------- -
---------------- ------ ------- --------- ------------ ----------- ----- -
-- -------- -- --------------- -
------ ------
-
-- ------------- -
---------- - --- ---------------------------------
-
------ ----------------------------- ------- ------------
-
-我们可以在模板中使用multiOrderBy管道来对数据进行多字段排序。以下是一个示例：
-- -------------------- ---- -------
-------
-------
----
--- ------------------------------------
--- --------------------------------------
---------------
-----
--------
-------
--- ----------- ------ -- ------ - ----------------------------------------
------ ---------- -------
------ ----------- -------
------ ------------- -------
-----
--------
--------在这个示例中，我们定义了一个sortFields数组来存储排序字段。我们还定义了一个sortDirections数组来存储每个排序字段的排序方向。当用户单击表头时，我们会调用toggleSort函数来切换相应字段的排序方向，并重新渲染列表。
以下是toggleSort函数的实现代码：
-- -------------------- ---- -------
----------------- ------- -
--- ----- - -------------------------------
-- ------ --- --- -
----------------------------
--------------------------------
- ---- -
-------------------------- - ----------------------------
-
-总结
Angular内置的orderBy管道只能按照单个字段进行排序，无法满足
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25006