在前端开发中，我们经常需要对列表进行排序。而 ngx-order-by 是一个非常实用的 npm 包，在 Angular 应用中能够帮助我们快速而方便地排序数据。本文将介绍 ngx-order-by 的使用教程，并带有实际的示例代码。
安装 ngx-order-by
要使用 ngx-order-by，我们需要先安装它。在命令行中输入以下命令即可：
npm install ngx-order-by --save
在 Angular 应用中使用 ngx-order-by
在安装 ngx-order-by 后，我们需要在应用的 NgModule 中引入 ngx-order-by 模块。假设我们的应用名为 MyApp，在 app.module.ts 中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- ---------------
-----------
-------- -
-----------
--
------------- - --- --
---------- - --- --
---------- - --- -
--
------ ----- ----------- - -在以上代码中，我们首先 import OrderModule，然后将 OrderModule 添加到 imports 数组中。这样我们就成功引入了 ngx-order-by 模块。
在组件中使用 ngx-order-by
下面让我们看一个实际的应用场景，假设我们有一个 studentList 数据，现在需要按照学生的年龄进行排序。下面是一个简单的组件代码示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- ---------
------------
--------- --------------
------------ ---------------------------
---------- ----------------------------
--
------ ----- ---------------- -
----------- - -
- --- -- ----- ------ ---- -- --
- --- -- ----- ------ ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- -------- ---- -- -
--
----- - ---
------- - ------
-------------- -
---------- - ---------
------------ - --------------
---------------- - ------------------------- ------------- ------------- - ------ - --------
-
-上面的代码中，我们首先 import 了 lodash 中的 orderBy 方法，然后定义了一个 studentList 数组，里面包含了学生信息。接着我们定义了 order 和 reverse 两个变量，用于存储排序的属性和顺序。
sort 方法用于触发排序操作，其中包括以下几个步骤：
- 将排序属性赋值给 order 变量。
- 将 reverse 变量取反，用于切换排序顺序。
- 调用 orderBy 方法，将 studentList 数组作为第一个参数，order 变量作为第二个参数，reverse 变量决定升降序。最后将排序后的数组赋值给 studentList。
sort 方法是我们排序的核心代码，但其中的 orderBy 方法并不是 Angular 自带的。为了使用 orderBy 方法，我们需要通过安装 ngx-order-by 所引入的 lodash 来实现。
sort 方法根据我们的点击事件进行触发，比如我们点击了按钮，把 age 传入 sort 方法：
<button (click)="sort('age')">Sort by Age</button>总结
至此，我们已经完成了 ngx-order-by 的安装和使用。ngx-order-by 是一个非常实用而且易用的 npm 包，能够帮助我们快速地实现列表排序。通过本文的学习，我们不仅了解了如何使用 ngx-order-by，而且也掌握了如何通过 Lodash 库来实现排序的操作，可以说有一定的学习和指导意义。
参考文献：
- ngx-order-by. https://www.npmjs.com/package/ngx-order-by. (2021-07-05 访问)。
- Lodash. https://lodash.com/docs/4.17.15#orderBy. (2021-07-05 访问)。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005669181e8991b448e2cdf