20190522_163307.gif
html模板部分代码
<div class="col-lg-9">
<div *ngFor="let item of variables;let i=index">
<input class="key-input form-control" type="text" name="variableName{{i}}" placeholder="key" [(ngModel)]="item.variableName" />
<input class="value-input form-control" type="text" name="variableValue{{i}}" placeholder="value" [(ngModel)]="item.variableValue" />
<button class="" (click)="removeInput(i)">删除</button>
</div>
<button (click)="addInput()">增加</button>
</div>
对应ts文件代码：
// 分别保存变量键值对 的键和值
public variables: any[]=[{"variableName": "" , "variableValue": ""}];
// 添加键值对输入框
addInput() {
this.variables.push({"variableName": "" , "variableValue": ""});
}
// 删除变量键值对
removeInput(index) {
this.variables.splice(index, 1);
}
// 点击保存按钮时，将数组中的数据处理为对象，例如：{name:'Tom', age:18}
save(){
let variablesObj={};
this.variables.forEach(item=>{
if (item.variableName !="" && item.variableValue!="") {
variablesObj[item.variableName] = item.variableValue
}
})
}
填坑心得：input中的name属性一定要用下标加以处理，要不然会有不知名bug出现，有兴趣可以试一试->_->
PS: 只展示了部分核心代码，准确性自行斟酌。另外：本人才疏学浅，若有错误或考虑不周之处，欢迎大家留言指正和探讨！
--------------------------------------------2019-5-23更新----------------------------------------------
在热心小伙伴的提醒和指导下，发现文章存在缺陷，在此更新纠正：
就本案例来讲，是不用设置name属性的，因为不是在form表单中使用input；我在项目中使用的这部分代码外层有form标签包裹，所以不设置name属性就会报错，在写文章的时候也没注意到，非常抱歉。不清楚这部分知识点的小伙伴可以自行查阅，网上很多相关资料，这里就再不赘述。
再次感谢这位热心小伙伴兼同事的提醒与指导！
