刚开始学习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 = "<tr>" + " <td ></td>" + " <td><input id='" + this. paramsNameid + "' class='console-textbox' maxlength='99' type='text'></td> " + " <td ><select id='" + this. paraTypeid + "' class='console-textbox console-with-4'>" + " <option>Int</option>"+ " <option>String</option>"+ " <option>Long</option>"+ " <option>Boolean</option>"+ " <option>Float</option>"+ " <option>Double</option>"+ " </select></td>" + " <td><input id = '" + this. checkBoxid + "' type = 'checkbox' value = ''></td>" + " <td><input id='" + this. paramsDesid + "' type='text' class='console-textbox'></td> " + " <td><button id = '" + deleteid + "' class='deleteCss' type='button'>删除</button></td>" + "</tr>"; 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 = [];
即可。
