Angular将填入表单的数据渲染到表格
一、项目简介
我们将采用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
我们先把主体框架写好
1 <div class="container"> 2 <div class="row"> 3 <form> 4 <div class="form-group"> 5 <label for="exampleInputEmail1">X坐标</label> 6 <input type="text" class="form-control" id="exampleInputEmail1" placeholder="xcood" name="xcood"> 7 </div> 8 <div class="form-group"> 9 <label for="exampleInputPassword1">Y坐标</label> 10 <input type="text" class="form-control" id="exampleInputPassword1" placeholder="ycood" name="ycood"> 11 </div> 12 <button type="button" class="btn btn-default" (click)="additem()">添加</button> 13 </form> 14 </div> 15 <div class="row"> 16 <data-table [array]="addArray"></data-table><!--导入dataTable组件,并且将父组件里面的form表单数据传递给子组件渲染--> 17 </div> 18 </div>
这里使用了ngx-bootstrap,文末我们再讲解一下如何导入这个东西。
2.app.component.ts
我们再父组件需要用到一个添加功能的additem()方法
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-root', 5 templateUrl: './app.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class AppComponent { 9 addArray=[]; 10 xcood: any; 11 ycood: any; 12 13 additem(){ 14 this.xcood = (document.getElementsByName('xcood')[0] as HTMLInputElement).value; 15 this.ycood = (document.getElementsByName('ycood')[0] as HTMLInputElement).value; 16 this.addArray.push({ 17 xcood:this.xcood, 18 ycood:this.ycood 19 }) 20 } 21 }
在这里面,如果我们不定义
xcood: any;
ycood: any;
的话,那么将会出现如下错误
我们没有声明就直接初始化他们了,肯定会出错,要记住一件事,要用到什么变量,首先要先声明它,再去给它初始化。
在additem()函数里面,我们要初始化这两个变量了,记住要用this,否则获取不到全局作用域声明的变量。因为我们是点击添加按钮再去获取form表单里面的数据,所以在逻辑上我们要把获取的步骤放在additem()函数里面。这里还有一个新的写法,因为之前我直接用
this.xcood = document.getElementsByName('xcood')[0].value;是获取不到数据的,
所以我在网上找了一下,替换成了上面那种写法。
我们在一开始就声明了一个addArray的数组,这个数组即将存放的是一条一条的数据对象,在additem()函数里面每调用一次就把获取到的数据push给这个数组。
接下来我们就要在子组件接收这个数组,并且渲染到表格上。
3.dataTable.component.html
1 <table class="table table-striped"> 2 <thead> 3 <tr> 4 <th>X坐标</th> 5 <th>Y坐标</th> 6 <th>操作</th> 7 </tr> 8 </thead> 9 <tbody *ngIf="array.length!==0"><!--这里我们判断一下传递过来的数组是否为空,如果是空的话我们就没有必要渲染出来了--> 10 <tr *ngFor="let data of array"> 11 <td>{{data.xcood}}</td> 12 <td>{{data.ycood}}</td> 13 <td><button type="button" class="btn btn-default" (click)="delete(data)">删除</button></td> 14 </tr> 15 </tbody> 16 </table>
4.dataTable.component.ts
1 import { Component,Input } from '@angular/core'; 2 3 @Component({ 4 selector: 'data-table', 5 templateUrl: './dataTable.component.html', 6 styleUrls: ['./dataTable.component.css'] 7 }) 8 export class DataTableComponent { 9 @Input() array:any;//接收父组件传递过来的addArray数组 10 index: number; //跟上面说的一样要先声明 11 delete(data){ 12 this.index = this.array.indexOf(data); 13 if (this.index > -1) { 14 this.array.splice(this.index, 1);//跟上面说的一样在初始化的时候要用到this 15 } 16 } 17 }
我们接下来给删除按钮的函数delete()编写逻辑,我们要的效果是点击哪一条就删除哪一条,所以我们要先获取到你要删除的这条数据对象,然后在父组件传递过来数组里面查找到这条数据对象的位置,再用splice()函数删除。
5.app.module.ts
记得要在app.module.ts里面注册你新建的dataTable组件
1 import { BrowserModule } from '@angular/platform-browser'; 2 import { NgModule } from '@angular/core'; 3 4 import { AppComponent } from './app.component'; 5 import { DataTableComponent } from './dataTable/dataTable.component'; 6 7 @NgModule({ 8 declarations: [ 9 AppComponent, 10 DataTableComponent 11 ], 12 imports: [ 13 BrowserModule 14 ], 15 providers: [], 16 bootstrap: [AppComponent] 17 }) 18 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">最后直接可以在你编写样式的时候使用了。