引言
在前端开发过程中，数据的呈现与排序是非常常见的需求，而 ng2-table-sorting 是一个方便易用的 npm 包，能够方便地帮助我们实现原始数据的表格排列和排序。通过这篇文章，我们将会学到如何使用 ng2-table-sorting 构建高效可观的数据表格，并学习如何通过该包对数据表格进行排序。
安装
首先，在使用 ng2-table-sorting 之前，我们需要在项目中安装该 npm 包。请在命令行终端中输入以下命令：
npm install ng2-table-sorting --save
该命令会自动将 ng2-table-sorting 安装到项目中，并添加到 package.json 文件中的 dependencies 中。
使用
使用 ng2-table-sorting 构建数据表格的过程十分简单。首先，我们需要在应用程序模块中导入 TableModule：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
-----------
-------- -
----------- -- - ----------- ---------
--
------------- -
------------ -- --------
--
---------- --------------
--
------ ----- --------- - -接着我们就可以在应用程序中使用ng2-table-sorting 创建表格并进行排序。
例如，我们创建一个数据表格组件，并在其HTML文件中添加如下代码：
-- -------------------- ---- -------
------ --------------- ----------------- --------------------------- ------------ ----------- ---------------
-------
----
----------
-------------
---------------
------------
-----
--------
-------
--- ----------- ---- -- -------- --- - - -------
------- - --------
----------------------
------------------------
---------------------
-----
--------
--------在组件文件的 TypeScript 类中，我们需要导入 TableData 接口并创建一个数据表格对象：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- --------------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
---------- - --
----- --------- - -
----- -
- ----- ------- ------- ------- ---- -- --
- ----- ------- ------- --------- ---- -- --
- ----- ------- ------- ------- ---- -- --
- ----- -------- ------- --------- ---- -- --
- ----- ------ ------- ------- ---- -- --
- ----- ----------- ------- --------- ---- -- -
-
--
------------- - -
---------- -
-
-现在，我们就可以在应用程序中成功的创建一个数据表格，并实现了数据排序。
排序
默认情况下，ng2-table-sorting 会针对数据表格的每一列进行自动升序排序。然而，我们可以通过样式绑定来使用不同的排序方式—升序或降序。通过使用下面的例子，我们可以看到如何在 ng2-table-sorting 中实现单独的字段排序：
<th class="text-right active" [mfDefaultSort]="data" [mfDefaultSortDirection]="'desc'">Age</th> <th class="text-center" [mfDefaultSort]="'ascending'">Gender</th>
示例代码
1.安装 ng2-table-sorting
npm install ng2-table-sorting --save
2.导入 TableModule 导出的组件并将其添加到应用程序模块中：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
-----------
-------- -
-----------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -3.创建一个数据表格，并在 HTML 文件中使用它：
-- -------------------- ---- -------
------ --------------- ----------------- --------------------------- ------------ ----------- ---------------
-------
----
--- --------------------------
-------------
---------------
--- ----------------- ------- ---------------------- ------------------------------------------
-----
--------
-------
--- ----------- ---- -- -------- --- - - -------
------- - --------
----------------------
------------------------
--- ------------------------------------
-----
--------
--------4.创建一个 TypeScript 类并在其中定义一个数据表格：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- --------------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
---------- - --
----- --------- - -
----- -
- ----- ------- ------- ------- ---- -- --
- ----- ------- ------- --------- ---- -- --
- ----- ------- ------- ------- ---- -- --
- ----- -------- ------- --------- ---- -- --
- ----- ------ ------- ------- ---- -- --
- ----- ----------- ------- --------- ---- -- -
-
--
------------- - -
---------- -
-
-结论
在本文中，我们学习了如何使用 ng2-table-sorting 创建和排序数据表格。尽管这只是一个小小的 npm 包，但它非常实用，能够使我们的工作变得轻松简单。所以现在就开始使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005546081e8991b448d1ab8