Angular2+通过输入框动态添加/删除键值对

大致效果动态图 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属性就会报错，在写文章的时候也没注意到，非常抱歉。不清楚这部分知识点的小伙伴可以自行查阅，网上很多相关资料，这里就再不赘述。
再次感谢这位热心小伙伴兼同事的提醒与指导！