重置动态添加的字段值

Question

我的组件有 2 个字段，分别称为 employee(dropdown) 和 EmployeeId，我正在动态添加这 2 个字段值，如下图所示：

当我选择特定的 Employee(ex Employee2) 来 edit 时，我会将 Employee(Employee2) 值返回到输入字段，如下所示：

这里我面临两个问题：

• 当我更改选定的 Employee(Ex Employee2) 值时，它会在单击 add 按钮之前反映：

只有在点击添加按钮后才会反映

• 当用户错误地选择要编辑的特定员工但他不想编辑该员工时，必须将所选员工（前员工 2）从单击Clear 按钮时的输入字段，我尝试从 i/p 字段中删除 Employe，但我正在删除以下详细信息：

它应该像这样删除：

Stackblitz DEMO

Answer 1

你可以试试这个代码：

  addFieldValue() {
    if(this.newAttribute.employee && this.newAttribute.id){
      const index = this.fieldArray.findIndex((item) => this.newAttribute.employee === item.employee);
      if (index<0) {
        this.fieldArray.push(this.newAttribute)
      }else{
        this.fieldArray[index] = this.newAttribute
      }
    }

    this.newAttribute = {};
  }          

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

但是你不能推 2 个员工_1

如果要推送多个同名员工，可以试试：

  editedField:number;

  addFieldValue() {
    if(this.newAttribute.employee && this.newAttribute.id){
      if (this.editedField == undefined) {
        this.fieldArray.push(this.newAttribute)
      }else{
        this.fieldArray[this.editedField] = this.newAttribute;
        this.editedField = undefined;
      }
    }

    this.newAttribute = {};
  }          

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