在前端开发中，表格是一个常见的组件。在 Angular 2 中，我们可以使用 ngFor 指令来循环渲染表格。但是，当我们需要添加或删除表格中的行时，该怎么办呢？本文将介绍如何使用 Angular 2 添加/删除行到表格，并提供示例代码。
添加行
要添加行到表格中，我们需要做以下几个步骤：
- 在组件中定义表格数据。
在组件中定义一个数组，用于存储表格中的数据。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------
-------
----
-------------
------------
-----
--------
-------
--- ----------- ------ -- --------
------ ----------- -------
------ ---------- -------
-----
--------
--------
------- ------------------------- ---------------
-
--
------ ----- ------------ -
------ - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- ---------- ---- -- -
--
----------- -
------------------ ----- --- ---- ---- ---
-
-在这个例子中，我们定义了一个 people 数组，用于存储表格中的数据。在 addPerson 方法中，我们向 people 数组中添加一个空对象，用于渲染新的一行。
- 在模板中使用 ngFor 指令渲染表格。
在模板中使用 ngFor 指令循环渲染表格中的数据。例如：
-- -------------------- ---- -------
-------
-------
----
-------------
------------
-----
--------
-------
--- ----------- ------ -- --------
------ ----------- -------
------ ---------- -------
-----
--------
--------在这个例子中，我们使用 ngFor 指令循环渲染表格中的数据。每个 person 对象都包含一个 name 和 age 属性，用于渲染表格中的一行。
- 在模板中添加一个按钮，用于添加新的一行。
在模板中添加一个按钮，用于触发 addPerson 方法，添加新的一行。例如：
<button (click)="addPerson()">Add Person</button>
在这个例子中，我们在模板中添加了一个按钮，用于触发 addPerson 方法，向表格中添加新的一行。
删除行
要删除表格中的行，我们需要做以下几个步骤：
- 在组件中定义删除行的方法。
在组件中定义一个 removePerson 方法，用于从 people 数组中删除指定的行。例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------
-------
----
-------------
------------
---------------
-----
--------
-------
--- ----------- ------ -- ------- --- - - -------
---------- ------------------------- -------
---------- ------------------------ -------
----------- ----------------------------------------------
-----
--------
--------
------- ------------------------- ---------------
-
--
------ ----- ------------ -
------ - -
- ----- -------- ---- -- --
- ----- ------ ---- -- --
- ----- ---------- ---- -- -
--
----------- -
------------------ ----- --- ---- ---- ---
-
------------------- ------- -
------------------------- ---
-
-在这个例子中，我们定义了一个 removePerson 方法，用于从 people 数组中删除指定的行。在模板中，我们添加了一个 Delete 按钮，用于触发 removePerson 方法。
- 在模板中使用 ngFor 指令渲染表格。
在模板中使用 ngFor 指令循环渲染表格中的数据，并在每行中添加一个 Delete 按钮，用于触发 removePerson 方法。例如：
-- -------------------- ---- -------
-------
-------
----
-------------
------------
---------------
-----
--------
-------
--- ----------- ------ -- ------- --- - - -------
---------- ------------------------- -------
---------- ------------------------ -------
----------- ----------------------------------------------
-----
--------
--------在这个例子中，我们使用 ngFor 指令循环渲染表格中的数据，并在每行中添加一个 Delete 按钮，用于触发 removePerson 方法。
总结
本文介绍了如何使用 Angular 2 添加/删除行到表格，并提供了示例代码。在实际开发中，我们可以根据实际需求，修改示例代码，实现自己的功能。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c08f76add4f0e0ffa93563