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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容