一、项目简介

我们将采用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

我们先把主体框架写好

<div class="container">
 <div class="row">
  <form>
   <div class="form-group">
    <label for="exampleInputEmail1">X坐标</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood">
   </div>
   <div class="form-group">
    <label for="exampleInputPassword1">Y坐标</label>
    <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood">
   </div>
   <button type="button" class="btn btn-default" (click)="additem()">添加</button>
  </form>  
 </div>
 <div class="row">
  <data-table [array]="addArray"></data-table><!--导入dataTable组件，并且将父组件里面的form表单数据传递给子组件渲染-->
 </div>
</div>

这里使用了ngx-bootstrap，文末我们再讲解一下如何导入这个东西。

2.app.component.ts

我们再父组件需要用到一个添加功能的additem()方法

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 addArray=[];
 xcood: any;
 ycood: any;

 additem(){
  this.xcood = (document.getElementsByName('xcood')[0] as HTMLInputElement).value;
  this.ycood = (document.getElementsByName('ycood')[0] as HTMLInputElement).value;
  this.addArray.push({
   xcood:this.xcood,
   ycood:this.ycood
  })
 }
}

在这里面，如果我们不定义

xcood: any;

ycood: any;

的话，那么将会出现如下错误

我们没有声明就直接初始化他们了，肯定会出错，要记住一件事，要用到什么变量，首先要先声明它，再去给它初始化。

在additem()函数里面，我们要初始化这两个变量了，记住要用this，否则获取不到全局作用域声明的变量。因为我们是点击添加按钮再去获取form表单里面的数据，所以在逻辑上我们要把获取的步骤放在additem()函数里面。这里还有一个新的写法，因为之前我直接用

this.xcood = document.getElementsByName('xcood')[0].value;是获取不到数据的，

所以我在网上找了一下，替换成了上面那种写法。

我们在一开始就声明了一个addArray的数组，这个数组即将存放的是一条一条的数据对象，在additem()函数里面每调用一次就把获取到的数据push给这个数组。

接下来我们就要在子组件接收这个数组，并且渲染到表格上。

3.dataTable.component.html

<table class="table table-striped">
 <thead>
  <tr>
   <th>X坐标</th>
   <th>Y坐标</th>
   <th>操作</th>
  </tr>
 </thead>
 <tbody *ngIf="array.length!==0"><!--这里我们判断一下传递过来的数组是否为空，如果是空的话我们就没有必要渲染出来了-->
  <tr *ngFor="let data of array">
   <td>{{data.xcood}}</td>
   <td>{{data.ycood}}</td>
   <td><button type="button" class="btn btn-default" (click)="delete(data)">删除</button></td>
  </tr>
 </tbody>
</table>

4.dataTable.component.ts

import { Component,Input } from '@angular/core';

@Component({
 selector: 'data-table',
 templateUrl: './dataTable.component.html',
 styleUrls: ['./dataTable.component.css']
})
export class DataTableComponent {
  @Input() array:any;//接收父组件传递过来的addArray数组
  index: number;   //跟上面说的一样要先声明
  delete(data){
    this.index = this.array.indexOf(data);
    if (this.index > -1) {
      this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this
      }
  }
}

我们接下来给删除按钮的函数delete()编写逻辑，我们要的效果是点击哪一条就删除哪一条，所以我们要先获取到你要删除的这条数据对象，然后在父组件传递过来数组里面查找到这条数据对象的位置，再用splice()函数删除。

5.app.module.ts

记得要在app.module.ts里面注册你新建的dataTable组件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DataTableComponent } from './dataTable/dataTable.component';

@NgModule({
 declarations: [
  AppComponent,
  DataTableComponent
 ],
 imports: [
  BrowserModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

四、ngx-bootstrap的导入

其实很简单，需要先在cmd输入 cnpm install ngx-bootstrap --save在当前目录下安装该模块

然后在项目最后的出口html文件里面加入

复制代码 代码如下:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

最后直接可以在你编写样式的时候使用了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Angular表单数据渲染到表格  # Angular表单数据渲染  # angularjs实现table表格td单元格单击变输入框/可编辑状态示例  # AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)  # AngularJS中table表格基本操作示例  # Angular表格神器ui-grid应用详解  # AngularJS实现表格的增删改查（仅限前端）  # 基于angular实现树形二级表格  # 要用  # 要先  # 就会  # 要在  # 这条  # 再去  # 表单  # 的是  # 使用了  # 成了  # 放在  # 将会  # 你要  # 在这  # 把它  # 要把  # 这两个  # 就没  # 就把  # 还有一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  利用vue写todolist单页应用  phpredis提高消息队列的实时性方法(推荐)  Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  Laravel如何使用Vite进行前端资源打包？（配置示例）  中山网站制作网页,中山新生登记系统登记流程？  如何在建站主机中优化服务器配置？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  个人摄影网站制作流程,摄影爱好者都去什么网站？  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  制作电商网页,电商供应链怎么做？  如何在IIS7中新建站点？详细步骤解析  Laravel如何使用查询构建器？（Query Builder高级用法）  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  魔方云NAT建站如何实现端口转发？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  Swift中switch语句区间和元组模式匹配  HTML 中动态设置元素 name 属性的正确语法详解  如何在万网主机上快速搭建网站？  如何破解联通资金短缺导致的基站建设难题？  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  清除minerd进程的简单方法  黑客如何利用漏洞与弱口令入侵网站服务器？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  深圳网站制作的公司有哪些,dido官方网站？  长沙做网站要多少钱,长沙国安网络怎么样？  微信小程序 canvas开发实例及注意事项  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel Fortify是什么，和Jetstream有什么关系  如何快速搭建FTP站点实现文件共享？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  Laravel如何生成URL和重定向？（路由助手函数）  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  北京的网站制作公司有哪些,哪个视频网站最好？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  什么是javascript作用域_全局和局部作用域有什么区别？  焦点电影公司作品,电影焦点结局是什么？  Mybatis 中的insertOrUpdate操作  电商网站制作价格怎么算,网上拍卖流程以及规则？  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  高端网站建设与定制开发一站式解决方案 中企动力