#npm 包 ng2-smart-table-radio 使用教程
如果你在开发 Angular 应用程序，并且正在寻找一种简单的方法来创建数据表格，并为每行添加单选按钮，则 ng2-smart-table-radio 可能是你需要的 npm 包。
##1.安装
首先，打开终端或命令行界面，然后输入以下命令以在你的 Angular 项目中安装 ng2-smart-table-radio 包。
npm install ng2-smart-table-radio --save
这会将 ng2-smart-table-radio 包安装到你的项目中。
##2.导入代码
安装 ng2-smart-table-radio 包后，你需要在 Angular 应用程序中导入所需的代码。 在应用程序的 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- ------------------
------ - ------------------------ - ---- ------------------------
-----------
-------- -
--------------
--------------------
-------------------------
--
------------- - ------------ --
---------- - ------------ --
--
------ ----- --------- - -上面的代码导入了 Ng2SmartTableModule 和 Ng2SmartTableRadioModule，并在你的应用程序模块中依此声明它们。
##3.使用 ng2-smart-table-radio
要使用 ng2-smart-table-radio，你需要使用 SmartTableSettings 类来创建一个对象，该对象定义表的列和行以及可以在行上添加的任何其他属性。 这是一个示例：
-- -------------------- ---- -------
-------- - -
-------- -
----- -
------ -------
--
------ -
------ --------
--
---- -
------ ------
--
------ -
------ ---------
------ --------
------- ------
----- --------
--------------------- ------- -- ----- - ---------------- - ---
--------- -----
-------- -----
-
-
-------- -
---- -----
------- -----
----- -----
--
--请注意，我们为表的每个列定义了一个标题，并将 type 列设置为 'radio'，并设置了其他设置，例如宽度和可编辑性等。
接下来，你需要在你的组件的 HTML 模板中添加以下代码来定义实际表的视图：
<ng2-smart-table [settings]="settings" [source]="data"> </ng2-smart-table>
###添加新行
要添加新行，必须使用一个方法，该方法接收一个事件对象。以下是实现此方法的示例：
onCreateConfirm(event) {
// 将新数据添加到你的数据源
this.data.push(event.newData);
// 刷新表数据
event.confirm.resolve();
}###删除行
要删除行，你需要使用与添加行类似的方法，该方法接收一个事件对象。以下是实现此方法的示例：
-- -------------------- ---- ------- ---------------------- - -- -------------- ----- ----- - --------------------- -- - --- ------------ -- --------- ----------------------- --- -- ----- ------------------------ -
###编辑行
要编辑行，你需要使用与添加行和删除行类似的方法，该方法接收一个事件对象。以下是实现此方法的示例：
-- -------------------- ---- ------- -------------------- - -- --------------- ----- ----- - --------------------- -- - --- ------------ -- --------------- ----------------------- -- --------------- -- ----- ------------------------ -
##结论
ng2-smart-table-radio 是一个强大的 npm 包，它提供了一种简单的方法来创建带有单选按钮的表格。 本文提供了有关如何使用 ng2-smart-table-radio 的详细指南和示例代码。 希望本文对你在开发 Angular 应用程序时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663b81e8991b448e2388