angular2动态增加表格

刚开始学习angular2，网上查到的资料很少，自己又遇到了动态增加表格的问题，在此记录一下自己遇到的坑。

页面中的table代码：

< table id= "tableParam" class= "tableParam" >

< tr class= "table-title" >

< th style= "width: 6%" >序号 th >

< th style= "width: 25%" >参数名称 th >

< th style= "width: 18%" >参数类型 th >

< th style= "width: 11%" >是否必填 th >

< th style= "width: 30%" >描述 th >

< th style= "width: 10%" >操作 th >

tr >

table >

< div class= "add" >

< div class= "btn" style= "padding: 3px;" >

< i class= "glyphicon glyphicon-plus" > i >

< a ( click)= "add()" style= "color: #FFF;" >增加一条 a >

div >

div >

在对应页面的组件component里面加上：

add(): void {

    var trid = new Date(). getTime();

this. paramsNameid = trid + 'paramsNameid';

this. paramsDesid = trid + 'paramsDesid';

this. paraTypeid = trid + 'paraTypeid';

this. checkBoxid = trid + 'checkBoxid';

var objtr = document. createElement( 'tr');

//删除所用的id

let deleteid = ( trid). toString() + 1;

//序号用的id

objtr. id = trid. toString();

objtr. innerHTML = "" +

" " +

" " +

" " +

" Int"+

" String"+

" Long"+

" Boolean"+

" Float"+

" Double"+

"

" +

" " +

" " +

" 删除" +

"";

document. getElementById( "tableParam"). appendChild( objtr);

var tableobj = document. getElementById( 'tableParam');

var countchildren = tableobj. childElementCount;

for ( var i = 1; i < countchildren; i++) {

tableobj. children[ i]. children[ 0]. innerHTML = ( i). toString();

}

//删除一行

$( "#" + deleteid). click( function () {

$( "#" + deleteid). parent(). parent(). remove();

var table = document. getElementById( 'tableParam');

var countchildren = table. childElementCount;

for ( var i = 1; i < countchildren; i++) {

table. children[ i]. children[ 0]. innerHTML = ( i). toString();

}

})

样式不好看，就可以自己设置了，例如

var td = $( "td");

td. css({ "padding" : "20px", "text-align" : "center" });

在调用接口的时候：在service.ts文件里面定义接口，例如：

import { Injectable } from '@angular/core';

import { Http, Headers, URLSearchParams } from '@angular/http';

import { BADRESP } from 'dns';

//一定要注意和后台的数据形式是一样的，这里显示的是传那种格式的数据。

const httpOptions = {

headers: new Headers({ 'Content-Type' : 'application/json' })

};

@ Injectable()

export class CreateService {

constructor( public http : Http) { }

add( paramslist: string[] = null, errorCode: string[] = null, tags?: string[], registerByJson?: string, status?: string){

let params = {}

if( paramslist) params[ "params"] = paramslist;

if( errorCode) params[ "errorCode"] = errorCode;

params[ "status"] = "已创建";

var array = [ "atom"];

params[ "tags"] = array;

params[ "registerByJson"] = "0";

console. dir( params);

return this. http. post( '/**/register', params, httpOptions)

. map( res => {

console. log( res);

return res;

});

}

}

之后在对应的组件文件里面调用这个接口：

//创建函数，在页面中要有此函数。

create() {

//字段的顺序要跟服务的字段相对应。

var tableParam = document. getElementById( 'tableParam');

var countchildren1 = tableParam. childElementCount;

// alert(countchildren);

var trid = "";

var paramsNameid = "";

var paramsDesid = "";

var paraTypeid = "";

var checkBoxid = "";

var paramsList = new Array();

//1以表格的每一行当作id，动态增加，去找相应的td值

for ( var i = 1; i < countchildren1; i++) {

trid = tableParam. children[ i]. id;

paramsNameid = trid + "paramsNameid";

paramsDesid = trid + "paramsDesid";

paraTypeid = trid + "paraTypeid";

checkBoxid = trid + "checkBoxid";

console. log( $( "#"+ paraTypeid). find( "option:selected"). text());

var paramsMap = {

"paramsName" : $( "#" + paramsNameid). val(),

"paramsDes" : $( "#" + paramsDesid). val(),

"paramsType" : $( "#"+ paraTypeid). find( "option:selected"). text(),

"checkBox" : $( "#"+ checkBoxid). is( ':checked'),

}

paramsList. push( paramsMap);

}

// alert(paramsNameid);

console. log( "list:", paramsList);

// alert(JSON.stringify(paramsList));

//错误码

var tableGoBack = document. getElementById( 'tableGoBack');

var countchildren2 = tableGoBack. childElementCount;

// alert(countchildren);

var errorid = "";

var errorCodeId = "";

var errorMessageId = "";

var errorDesId = "";

var errorList = new Array();

for ( var i = 1; i < countchildren2; i++) {

errorid = tableGoBack. children[ i]. id;

errorCodeId = errorid + "errorCodeId";

errorMessageId = errorid + "errorMessageId";

errorDesId = errorid + "errorDesId";

//获取动态增加表格的各列值

var errorMap = {

"errorCodeId" : $( "#" + errorCodeId). val(),

"errorMessageId" : $( "#" + errorMessageId). val(),

"errorDesId" : $( "#" + errorDesId). val()

}

errorList. push( errorMap);

}//调用接口的地方。

this. CreateService. add( apiName, this. Method, this. APIType,

this. area, path, address, port, successResult, errorResult, des, paramsList, errorList,)

. subscribe( add => {

this. data = add[ '_body'];

alert( this. data);

})

}

然后就可以把动态增加的表格的每一列的值都作为参数传给后台了。结束。

其实还有一种方法：

// paramsdatas: string[] = ['请选择', 'Int', 'String', 'Long', 'Boolean', 'Float', 'Double'];

// var par = this.paramsdatas;

// var select = document.createElement('select');

// select.addEventListener('change', function () {

// (function () {

// change(this, this.selectedIndex)

// }).call(select)

// })

// for (var p in par) {

// var option = document.createElement('option');

// select.options.add(option);

// option.text = par[p];

// }

// //要用getElementById方式

// document.getElementById(paraTypeid).appendChild(select);

// function change(sel, index) {

// text = sel.options[index].text;//选中的页面上的表现值

// array.push(text);

// }

// var check = document.createElement('input');

// check.type = "checkbox";

// $("#"+this.checkBoxid).checked;

// alert($("#"+checkBoxid).checked);

// checkChange = check.value;

// alert(checkChange);

// arrayCheck.push(checkChange);

// alert(arrayCheck)

但是这种方法不能跟id结合起来，如果删除一个的话，数组里面的值不会变。但是没有删除还是可以试试的。

// remove(): void {

// $("#tableParam").children().children().children().click(function () {

// $("tr td a").each(function (index, domEle) {

// $(domEle).click(function () {

// $(domEle).parent().parent().remove();

// });

// });

// });

// }

这是动态删除某一行。并不能真正的删除，只是页面的删除。

一个函数里面的变量需要在另一个函数中用到的话，是需要定义全局变量的，在import下面写例如：

let array = [];

即可。