编辑动态添加的输入字段的值

Question

场景：

• 我有一个名为demo的组件，该组件具有Employee type的下拉列表和Employee Id的输入字段。
• 点击 + 图标后，我将动态添加这两个字段(i,e Employee Type & Id)，如下所示：

• 我可以添加和删除这些动态添加的值(i,e Employee Type & Id)。意味着单击取消图标（X）能够删除添加的值。

预期结果：

  

我想在单击“编辑”（即笔图标）时编辑添加的值（即EMployee Type和ID）

再次点击pen icon时，我应该返回到该字段以编辑如下所示的值：

Stackblitz DEMO

Answer 1

检查this堆栈闪电。当用户单击编辑图标时，这些值将在输入字段中可编辑，而当他单击添加按钮时，这些字段将被清除并且对象将被更新（不再添加）。

demo.component.ts

addFieldValue() {
  // only add object if it is a new one
  if (this.fieldArray.indexOf(this.newAttribute) === -1) {
    this.fieldArray.push(this.newAttribute)
  }    

  this.newAttribute = {};
  console.log(this.fieldArray);
}          

editFieldValue(index) {
 this.newAttribute = this.fieldArray[index];
}

demo.componentht

<td (click)="editFieldValue(i)">
  <i class="material-icons">
    create
  </i>
</td>