一、项目简介

我们将采用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将填入表单的数据渲染到表格的更多相关文章

  1. Request对象主要用于获取来自客户端的数据,如用户填入表单的数据、保存在客户端的Cookie等。

    1.主要属性  ApplicationPath  获取服务器上asp.net应用程序的虚拟应用程序根路径  Browser  获取有关正在请求的客户端的浏览器功能的信息,该属性值为:HttpBrows ...

  2. struts_表单得到数据

    在大家学习struts表达式语言的时候经常会遇到,从表单的提交上面得到数据, 而如何将表单的数据得到呢? 下面就介绍其中的一种方式: :以类的方式进行注入我们以login为例子 首先可以在struts ...

  3. js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  4. Javaweb学习笔记——(十四)—————— 服务器端验证注册登入表单项目

    项目:https://download.csdn.net/download/qq_40223688/10463436 项目 功能: *注册 *登录--------------------------- ...

  5. django做form表单的数据验证

    我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...

  6. HTTP通信模拟表单提交数据

    前面记录过一篇关于http通信,发送数据的文章:http://www.cnblogs.com/hyyq/p/7089040.html,今天要记录的是如何通过http模拟表单提交数据. 一.通过GET请 ...

  7. from表单提交数据之后,后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

  8. Struts2 03---数据封装+获取表单提交数据

        Struts的数据封装分为三种:属性封装,模型驱动,表达式封装.下面以获取表单提交数据来简单介绍一下Struts的数据封装. <form action="loginlogin. ...

  9. <记录> axios 模拟表单提交数据

    ajax 可以通过 FormData 对象模拟表单提交数据 第一种方式:自定义FormData信息 //创建formData对象 var formData = new FormData(); //添加 ...

随机推荐

  1. 【Iftop】实时监控流量工具

    linux基本查询流量的命令有: 1.ifconfig  只能看到当前接收和发送出去的总共的字节大小,但是不能看到网卡流量的实时发送情况 2.watch more /proc/net/dev 只有接受 ...

  2. newInstance和new的区别(good)

    从JVM 的角度看,我们使用关键字new创建一个类的时候,这个类可以没有被加载.但是使用newInstance()方法的时候,就必须保证:1.这个 类已经加载:2.这个类已经连接了.而完成上面两个步骤 ...

  3. 网站部署中遇到的问题-编译器错误信息: CS0016

    问题描述: 访问站点出现错误win7 x64+iis7.5 配置错误:CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\ ...

  4. PAT 1021 Deepest Root

    #include <cstdio> #include <cstdlib> #include <vector> using namespace std; class ...

  5. sql: 生日赠品中的相关算法

    ---2013年10月9日生日,就以2012年9月1日至2013年8月31日計算 (因為係生日月份前兩個月之最後一天為結算日) DECLARE @birthday datetime,@now date ...

  6. jsonp跨域&百度下拉

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. boost库的配置——Linux篇

    Boost库分为两个部分来使用,一是直接使用对应的头文件,二是需要编译安装相应的库才可以使用. 下面是boost在Linux上安装和使用过程(整个boost库全部安装): (1)在www.boost. ...

  8. Windows7中Java64位环境变量配置:javac不是内部命令或外部命令,也不是可运行的程序或批处理文件。

    按照默认设置安装完JDK(Java Developement Kits)后,一般默认路径为:C:\Program Files\Java\jdk1.8.0_05_x64\文件夹. 然后配置环境变量:&q ...

  9. JSP初学者3

    reponse代表服务器对客户端的响应.大部分时候,程序无须使用response来响应客户端请求,因为有更简单的响应对象——out,它代表页面输出流. 但out无法响应生成非字符内容(out是JspW ...

  10. 【PIC单片机】MPLAB X IDE快速入门指南

    引言:近期由于项目实践需要,开始动手学习相关硬件知识.从PIC单片机入手. 单片机学习核心要点:查数据手册 配置寄存器 一.基于MPLAB X IDE配置位设置 MPLAB X IDE和MPLAB I ...