Редактировать значения динамически добавляемых полей ввода

Question

СЦЕНАРИЙ:

• У меня есть компонент с именем demo, который имеет раскрывающийся список для Employee type и поле ввода для Employee Id.
• После нажатия + Значок я динамически добавляю эти два поля (i,e Employee Type & Id), как показано ниже:

• Я могу добавить & удалить эти динамически добавленные значения (i,e Employee Type & Id). Значит при нажатии отменить значок (X) я могу удалить добавленные значения.

ОЖИДАЕМЫЙ РЕЗУЛЬТАТ:

Я хочу отредактировать добавленные значения (i, eEMployee Type & Id) `при нажатии Edit (i, значок электронного пера)

Означает, что при нажатии pen icon снова я должен вернуться в поле для редактирования значений, как показано ниже:

Stackblitz DEMO

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>