前言
在前端开发过程中，我们经常使用表格来展现数据。Angular 框架提供了 @angular/material 来支持我们创建表格，但是它并不提供任何支持用于与后端服务器交互的模块。为了解决这个问题，我们可以使用 grid-angular-adapter 这个 npm 包。
安装
在开始使用 grid-angular-adapter 之前，你需要先安装它。你可以在终端或命令行中输入以下命令来安装：
npm install --save grid-angular-adapter
用法
在安装完成 grid-angular-adapter 后，你需要在你的 Angular 项目中导入它，在你的 Component 或者 Service 中使用它。
导入
在你的 Component 或者 Service 中导入 GridAngularAdapterModule ：
import { GridAngularAdapterModule } from 'grid-angular-adapter';
@NgModule({
imports: [
GridAngularAdapterModule
]
})
export class YourModule { }引用
在你的 Component 或者 Service 中引用 GridAdapter：
-- -------------------- ---- -------
------ - ------------ -------------- - ---- -----------------------
------ ----- ------------- -
------ ------------ ------------
------ --------------- ---------------
------------- -
---------------- - --- -------------
---- ---------------
-------- --------------------
---------- ---------------------
-- --------------
---
------------------- - --- -----------------
-
-使用
在你的 HTML 中添加以下代码以展示表格：
<grid-angular-adapter [gridAdapter]="gridAdapter" [gridPagination]="gridPagination">
<!--在这里添加你的表格列及其它元素-->
</grid-angular-adapter>随后你可以通过以下方式来操作表格：
获取数据：只需调用
this.gridAdapter.loadData()即可获取数据。添加行：只需调用
this.gridAdapter.addRow()即可添加行。修改行：只需调用
this.gridAdapter.editRow()即可修改行。删除行：只需调用
this.gridAdapter.deleteRow()即可删除行。
示例代码
以下的示例代码演示了如何使用 grid-angular-adapter。
Component
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ -------------- - ---- -----------------------
------------
--------- ---------------------
------------ ----------------------------------
---------- ----------------------------------
--
------ ----- ------------- -
------ ------------ ------------
------ --------------- ---------------
------------- -
---------------- - --- -------------
---- --------------------------------
-------- --------------------------------
---------- ---------------------------------
---
------------------- - --- -----------------
-
------ ---------- -
----------------------------
-
------ -------- -
-------------------------
--- --
----- ---
------------ ---
----- --
---
-
------ ------------ -
------------------------------
-
------ -------------- -
--------------------------------
-
-HTML
-- -------------------- ---- -------
--------------------- --------------------------- ----------------------------------
-------------- --------------- ----------------------- --- --- ----------------------
------------- ------------------
---------------- --------------------------------------
--------- ---------------- ----------------------------------
---------------
------------- --------------------
---------------- ----------------------------------------
--------- ---------------- -------- --------------------------------
----------------
------ -------- -----------------------
-----------------
-----------
---------------
------------- ---------------------------
---------------- -----------------------------------------------
--------- ---------------- -------- --------------------------------
----------------
------ -------- ------------------------------
-----------------
-----------
---------------
------------- --------------------
---------------- ----------------------------------------
--------- ---------------- -------- --------------------------------
----------------
------ -------- ---------------------- ------------------------ ---------
---------------------- --------- ---------------------------------------
--------------- -------------------------
-----------------
-----------
---------------
------------- ----------------------
---------------- ------------------------------------------
--------- ---------------- ---------
------- --------------- -------------------------------------------------------------
------- --------------- -----------------------------------------------------------------
-----------
---------------
--------------- ------------------------ ------- -------------- ------- ----------------------------
-------- --------------- ---- -------- ------ ------- -------------- ------- ---------- ---------- -------------------------
-----------------------结论
grid-angular-adapter 是一个好用的 Angular 表格数据交互的 npm 包，它可以轻松地与后端服务器进行交互。在本文中，我们介绍了它的安装、用法以及示例代码，并希望它对你的开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bbf81e8991b448d9585