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

Question

设想 ：

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

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

预期结果 ：

我想在单击编辑时编辑添加的值（即员工类型和 ID）（即钢笔图标）

意味着再次单击pen icon我应该返回到该字段以编辑值，如下所示：

Stackblitz演示

标签： typescriptangular-materialangular6

Answer 1

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

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>