反应式表单 - 双向属性绑定 - 仅适用于第一次

问题描述

我在 mat-expansion 面板中有一个反应式表单，用于添加和编辑记录。在这种形式中，其中一个字段是 mat-select 字段。在同一页面上，我有一个 mat-table，每一行都有一个编辑按钮。单击该编辑按钮后，表单会预先填充行数据。

表单还有一个清晰的表单按钮。当我第一次单击表格行上的编辑按钮时，这些值会在表单中正确填充。然后当我单击清除按钮时，它会清除表单。但是，当我再次单击编辑按钮时，mat-select 字段不会填充，而 mat-input 字段会正确填充。

如果我刷新页面并单击编辑行，它第一次再次起作用，然后就不起作用了。

无法弄清楚我哪里出错了。请帮忙

html 模板的一部分

            <mat-form-field>
              <mat-label>User Name</mat-label>
              <input matInput formControlName="userName" [(value)]="userNameVal">
              <mat-hint>min 3 characters</mat-hint>
            </mat-form-field>
            &nbsp;
            <mat-form-field>
              <mat-label>Select Role</mat-label>
              <mat-select matInput formControlName="role"  [(value)]="userRoleVal">
                <mat-option value='User'>User</mat-option>
                <mat-option value='Manager'>Manager</mat-option>
                <mat-option value='Admin'>Admin</mat-option>
              </mat-select>
            </mat-form-field>

component.ts

  onEdit(account) {
    this.editMode = true;
    this.userNameVal = account.userName;
    this.userRoleVal = account.role;

    console.log('userRoleVal',this.userRoleVal);   
    //gives correct result but does not get bound to display the value on UI second time onwards

    this.empId = account.employeeId;
    this.form.get('userName').reset({value: account.userName,disabled: true});
    this.form.get('employeeId').reset({value: '',disabled: true});
    this.openExpPanel = true;
  }

  onClearExpPanel() {
    // reset form
    this.form.reset();
    this.editMode = false;
    this.form.get('userName').reset({value: '',disabled: false});
    this.form.get('employeeId').reset({value: '',disabled: false});
    this.empEmail = "";
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）