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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 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
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php随机抽奖实例分析
2015/03/04 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
新手入门常用代码集锦
2007/01/11 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
Python psutil模块简单使用实例
2015/04/28 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
集体生日活动方案
2014/08/18 职场文书
安全施工责任书
2014/08/25 职场文书
python实现进度条的多种实现
2021/04/29 Python
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Python学习之时间包使用教程详解
2022/03/21 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技