angular表格添加_Angular将填入表单的数据渲染到表格

一、项目简介

我们将采用Angular框架来做一个demo，这个demo将要实现的功能如下：

在X坐标和Y坐标文本框输入信息，然后点击添加，就会在下面表格 中出现一项相应的数据，点击每一项旁边的删除按钮，该条信息就会被删除！

因为我们的表格数据是经常刷新的，所以我们把它独立出来作为一个组件。

二、项目目录

--------app

----------dataTable(文件夹)

------------dataTable.component.html

------------dataTable.component.css

------------dataTable.component.ts

----------app.component.html

----------app.component.css

----------app.component.ts

----------app.module.ts

三、代码讲解

1.app.component.html

我们先把主体框架写好

1

2

3

4

5 X坐标

6

7