Question

我有一个MatTable。从表格中选择一行后，请点击编辑按钮，它需要打开MatDialog并从所选行的数据中填充FormControls。

这是我在单击按钮时打开MatDialog的功能。

openEditWindow(): void {
    const dialogRef = this.dialog.open(MatDialogFormComponent, {
      width: '600px',
      height: '500px',
      data: {
        formHeaderText: 'Edit File Template',
        editData: this.selectedRowForEdit
      }
    });
  }

这是我的MatDialogFormComponent班。

export class MatDialogFormComponent implements OnInit {
// I removed some parts from the class for clarity. 
siteInsertForm = new FormGroup({
    templateName: new FormControl(),
    tagAddressFormat: new FormControl(),
    headerValueSeparator: new FormControl(),
    paramValuesCount: new FormControl(),
    paramValueSeparator: new FormControl()
  });

constructor(
    @Inject(MAT_DIALOG_DATA) public data: any) {

  }
}

在MatDialog的HTML代码中，我能够使用从MatTable Component类接收的数据成功更改表单名称。

<h1 mat-dialog-title>{{data.formHeaderText}}</h1>

以上代码正常运行。因此，然后我尝试将这些值解析为“编辑”表单。

ngOnInit() {
this.siteInsertForm .patchValue({
    templateName: this.editData.templateName
});
}

但是上面的代码不起作用。

所以我尝试了类似的方法来了解这里发生的事情。

我在MatDialogFormComponent类中实现了AfterViewInit生命周期方法。

export class MatDialogFormComponent implements OnInit, AfterViewInit  {
// I removed some parts from the class for clarity. 

ngOnInit() {
this.siteInsertForm .patchValue({
    templateName: this.editData.templateName
});
}
ngAfterViewInit(): void {
    this.siteInsertForm.patchValue({
      templateName: this.data.editData.name
    });
  }

}

然后它在MatDialog中显示了templateName，并且在控制台中出现以下错误。

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-form-field-should-float: false'. Current value: 'mat-form-field-should-float: true'.

是否有解决此问题的想法？我正在使用Angular 6

Answer 1

您应该使用ngAfterViewChecked生命周期挂钩

ngAfterViewChecked() {
  this.siteInsertForm .patchValue({
      templateName: this.editData.templateName
  });
}

ngAfterViewChecked是生命周期挂钩，在默认更改>检测器完成检查组件视图中的更改之后调用。

单击按钮无法正常工作时，在MatDialog中设置FormGroup数据

1 个答案: