前言
在前端开发中，我们很常见到需要展示数据的场景。而表格是展示数据的常用方式之一。在 Angular 4 的开发中，有一款非常实用的 npm 包——angular4-table，它可以让我们更方便地展示数据和处理表格相关操作。在本篇文章中，我们将以一个实际场景为例，详细讲解如何使用 angular4-table 包。
环境准备
在开始处理 angular4-table 包之前，我们需要保证环境的准备，如：
已安装 npm 包管理器
已创建好 angular 4 项目
如果还没有准备好以上环境，需要先完成环境的准备。
安装 angular4-table 包
打开命令行工具，并定位到项目的根目录下，执行如下命令，即可安装 angular4-table 包：
npm install angular4-table --save
在安装过程中，需要注意以下几点：
--save表示将包的依赖关系添加到package.json文件中。执行该命令需要联网，如果公司内部有 npm 镜像，可以使用
--registry参数指定镜像地址，例如：npm install angular4-table --registry http://registry.npm.corp.xxx.com --save
引入 angular4-table 包
在项目中引入 angular4-table 包，需要在 app.module.ts 文件中声明该模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------- - ---- -----------------
------ - ------------ - ---- ------------------
-----------
------------- -
-------------
--
-------- -
--------------
------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -需要注意如下几点：
需要从
angular4-table中导入Angular4TableModule模块。在
imports中添加Angular4TableModule.forRoot()语句。在组件中使用
Angular4TableComponent。
使用 angular4-table 包
为了演示如何使用 angular4-table 包，我们将采用实际场景：使用 angular4-table 包展示某公司员工的工资记录。
准备数据
在开始处理 angular4-table 包之前，需要准备好需要展示的数据。在 app.component.ts 文件中，添加如下数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
---- ---------- -
-----------
------
------
-
--------- ---------- -
----- -----------
------ -------
------- -------
-
----- ----------- ------------ - -
-
----- ----------------------
------ ----------
------- ------
--
-
----- -----------------
------ ----------
------- -----
--
-
----- -----------------
------ ----------
------- ------
--
-
----- ----------------------
------ ----------
------- ------
--
-
----- -----------------
------ ----------
------- -----
--
-
----- -----------------
------ ----------
------- ------
--
--构建表格
在准备好数据后，就可以开始使用 angular4-table 构建表格了。在 app.component.html 文件中，添加如下代码：
-- -------------------- ---- -------
-------
-------
----
--- ----------- ---- -- --------- ---- -------
-----
--------
-------
--- ----------- ----- -- --------
--- ----------- ---- -- -------
-- -------------------- -- --------- --- ---- -- ---------- --- -------------- --
-----
-----
--------
--------在如上代码中，我们使用了 *ngFor 指令，实现了表头和表格数据的循环展示。需要注意的是，我们需要在组件中声明需要循环展示的数据（如 types 和 months），在组件中，添加如下代码：
-- -------------------- ---- ------- ------------ --------- ----------- ------------ ----------------------- -- ------ ----- ------------ - ---------- - ----------- ------ ------------ - ----------------------- ----------------- ------------------ ------- -------- - ----------- ----------- ---------- - ----------- -
在如上代码中，我们声明了需要展示的数据：types 和 months，同时将数据源 salaryData 传递到了组件中。
使用 angular4-table 优化表格
虽然我们已经成功构建了一个表格，但是表格样式的美观程度还有提升的空间。此时，angular4-table 包就可以帮助我们进一步优化表格样式。在前面已经引入了 angular4-table 包，现在只需要在 app.component.html 文件中，添加如下代码即可完成表格优化：
<angular4-table [data]="salaryData" [config]="tableConfig"></angular4-table>
在如上代码中，我们使用了 angular4-table 组件，[data] 属性和 [config] 属性分别用于设置数据源和表格配置。在组件中，添加如下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -----------------
---- ---------- -
-----------
------
------
-
--------- ---------- -
----- -----------
------ -------
------- -------
-
----- ----------- ------------ - -
-
----- ----------------------
------ ----------
------- ------
--
-
----- -----------------
------ ----------
------- -----
--
-
----- -----------------
------ ----------
------- ------
--
-
----- ----------------------
------ ----------
------- ------
--
-
----- -----------------
------ ----------
------- -----
--
-
----- -----------------
------ ----------
------- ------
--
--
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------ -
---------- - -----------
---------- - -----------
------------ ------------------- - -
-------- -
-
--- -------------
----- -------
------ --------
--------- ---------
------- ------
--------- -----
----------- -----
--------------- ------- ------- -- -----------------------
--
-
--- --------
----- -----
------ --------
--------- ---------
------- ------
--------- -----
----------- -----
--------------- ------- ------- -- -----------------------
--
-
--- --------
----- -----
------ --------
--------- ---------
------- ------
--------- -----
----------- -----
--------------- ------- ------- -- -----------------------
--
-
--- --------
----- -----
------ --------
--------- ---------
--------- -----
----------- -----
-
--
---------- -------
------------- -------
------------------ -----
----------- -----
-------------- -----
---------------- -----
--
-在如上代码中，我们定义了表格配置项：columns、rowHeight、headerHeight、alternateRowColor、selectable、enableSorting 和 enableFiltering。在 columns 数组中，我们定义了表格头的显示信息，以及表格数据的渲染规则。通过设置这些参数，我们可以轻松拥有一个美观、实用、易读的表格。
总结
在本篇文章中，我们通过一个实际场景，详细讲解了如何使用 npm 包——angular4-table，展示表格信息。学习了本文之后，您不仅可以应对表格展示的开发场景，还可以不断发掘 angular4-table 包的更多高级用法，提升您的前端开发技艺。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd90