Angular将填入表单的数据渲染到表格的方法


Posted in Javascript onSeptember 22, 2017

一、项目简介

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

Angular将填入表单的数据渲染到表格的方法

在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">

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 #Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 #Javascript
vue-router 权限控制的示例代码
Sep 21 #Javascript
react router 4.0以上的路由应用详解
Sep 21 #Javascript
详解10分钟学会vue滚动行为
Sep 21 #Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 #jQuery
JavaScript实现简单生成随机颜色的方法
Sep 21 #Javascript
You might like
php获取网页请求状态程序示例
2014/06/17 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
javascript 写类方式之六
2009/07/05 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python实现发送邮件功能代码
2017/12/14 Python
python实现类之间的方法互相调用
2018/04/29 Python
python绘制立方体的方法
2018/07/02 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python中os包的用法
2020/06/01 Python
python中字符串的编码与解码详析
2020/12/03 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
外贸业务员工作职责
2014/01/06 职场文书
班级聚会策划书
2014/01/16 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技