欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 22:08:57
一、项目简介 我们将采用angular框架来做一个demo,这个demo将要实现的功能如下: 在x坐标和y坐标文本框输入信息,然后点击添加,就会在下面表格 中出现一...

一、项目简介

我们将采用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="" rel="stylesheet">

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

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