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 相关文章推荐
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
vue组件name的作用小结
May 23 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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数据流应用的一个简单实例
2012/09/14 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
用jquery来定位
2007/02/20 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python私有属性和方法实例分析
2015/01/15 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
详细分析python3的reduce函数
2017/12/05 Python
Python反射用法实例简析
2017/12/22 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python 如何设置守护进程
2020/10/29 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
木工主管岗位职责
2013/12/08 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
电影建国大业观后感
2015/06/01 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL