在前端开发中，表格是常用的 UI 元素之一。随着 Angular 2+ 的推出，越来越多的开发者开始使用它来构建大型 Web 应用程序。为了提高开发效率和代码质量，我们需要一些好用的工具来协助我们。今天，我们要介绍的就是一个非常好用的 Angular 2+ 表格组件：@claudiucelfilip/ng2-table。
安装
在使用之前，我们需要先安装它。打开命令行，进入你的项目目录，输入以下命令：
npm install @claudiucelfilip/ng2-table --save
这个命令会安装 @claudiucelfilip/ng2-table 并将它保存到 package.json 文件中的 dependencies 中。
使用
导入
在你的组件中导入 @claudiucelfilip/ng2-table：
import { Component } from '@angular/core';
import { Ng2TableModule } from '@claudiucelfilip/ng2-table';对于 NgModule，你需要导入 Ng2TableModule，并在 imports 中添加它：
@NgModule({
declarations: [AppComponent, ...],
imports: [Ng2TableModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {}数据绑定
在组件中，我们需要定义一个数组来存储表格数据：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- -------------------------
-
--
------ ----- ------------ -
---- - -
- --- -- ----- ------ ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- --------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------- ---- -- --
--
-属性
@claudiucelfilip/ng2-table 的主要属性有：
data: 表格数据columns: 表格列config: 表格配置pagination: 分页设置
我们来详细介绍一下这些属性。
data
data 属性是必填的，它定义了表格中的数据。我们可以将它绑定到组件中的一个数组，如上面的例子所示。
columns
columns 属性定义了表格中的列。它是一个数组，每个数组元素是一个对象，定义了一列的属性。例如：
columns = [
{ title: 'Id', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
];title：列标题field：数据字段名
config
config 属性定义了一些表格的其他配置，例如：
config = {
search: true,
sort: true,
paging: true,
className: ['table', 'table-hover', 'table-bordered']
};search：是否显示搜索框sort：是否支持排序paging：是否支持分页className：表格的 CSS 类名
pagination
pagination 属性定义了分页设置，例如：
pagination = {
pageNumber: 1,
pageSize: 5
};pageNumber：显示的页面号pageSize：每页显示的数据条数
示例代码
最后，我们贴出一个简单的表格示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------
-------------
-------------------
-----------------
-------------------------
-
-----------
-
--
------ ----- ---------------- -
---- - -
- --- -- ----- ------ ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- --------- ---- -- --
- --- -- ----- ------- ---- -- --
- --- -- ----- ------- ---- -- --
--
------- - -
- ------ ----- ------ ---- --
- ------ ------- ------ ------ --
- ------ ------ ------ ----- --
--
------ - -
------- -----
----- -----
------- -----
---------- --------- -------------- -----------------
--
---------- - -
----------- --
--------- -
--
-总结
@claudiucelfilip/ng2-table 是一个非常好用的 Angular 2+ 表格组件，它提供了丰富的属性和配置选项，让我们能够快速地构建出复杂的表格。希望这篇文章对你有帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66b5e