Angular/aggrid:如何将行数据传递给表单？(Material对话框)

Question

我在网格 api 中有数据，ag-grid。当我 select 一行并单击编辑按钮时，我希望将该行的数据加载到正确的表单字段中，但我很困惑如何正确地将我的数据传递给垫对话框。这是我的例子。首先，我有一个发出放置请求的服务和另一个发布数据的服务：

editUser(employee: Employees) {
  return this.http.put(this._url + '/' + employee.id, httpOptions).pipe(
    map((res: Response) => res.json)
  )
}

saveUser(employee: Employees) {
  return this.http.post(this._url, employee, httpOptions).subscribe((res: any) => {
    res = employee
    this.componentMethodCallSource.next();
  })
}

然后在我的 table.component class 中，我有按钮的功能。这 select 行、调用服务并打开对话框。

editUser() {
  const selectRows = this.gridApi.getSelectedRows();

  const editSub = selectRows.map((rowToEdit) => {
    return this.service.editUser(rowToEdit);
  });
  this.openDialog(FormComponent)
}

这是我卡住的地方，在我的表单 class 中，我需要在我的 ngoninit 中设置一个条件。这个条件决定了我是否调用我的 loadUser 函数。在这里，我尝试使用 MAT_DIALOG_DATA 加载 json id，这将确定是否应调用 loadUsers()。但我似乎无法访问我的 ID。我一直收到一条错误消息，说它是 undefined.

表单组件

employeeInfo: Employees;
userId: number;

constructor(
  public dialogRef: MatDialogRef<FormComponent>,
  private fb: FormBuilder, 
  private service: Service, 
  private http: HttpClient, 
  @Inject(MAT_DIALOG_DATA) public data: any
) {
  this.userId = this.data.userId;
}

ngOnInit() {
  this.createUserForm();
  if (this.userId > 0) {
    this.loadUser();
  }
}

createUserForm() {
  this.frmUser = this.fb.group({
    id: [],
    firstName: ["", [Validators.required]],
    lastName: ["", Validators.required],
  })
}

onSave() {
  this.employeeInfo = this.frmUser.getRawValue();
  this.employeeInfo.id = this.userId;
  this.service.saveUser(this.employeeInfo)
  this.dialogRef.close({
    success: 'success',
    data: {
      emp: this.employeeInfo.id
    }
  })
}

loadUser() {
  this.service.getData(this._url).subscribe((res: any) => {
    this.frmUser.patchValue({
      firstName: res.FirstName,
    })
  })
}

我正在为我的表单使用 MatDialogRef。

编辑：更新代码。仍然无法将数据发送到表单：表组件：

editUser(user) {
  const dialogRef = this.dialog.open(FormComponent, {

    width: '250px',
    data: user
  });

  dialogRef.afterClosed().subscribe(result => {
    this.user = user;
  });
}

表单组件：

  constructor( public dialogRef: MatDialogRef<FormComponent>,
    private fb: FormBuilder, private service: Service, private http: HttpClient,  @Inject(MAT_DIALOG_DATA) public data: Employees) { 
    }

Answer 1

我建议你阅读 Material Dialog 的文档。如果您想在对话框中显示用户编辑表单，我也不确定为什么要使用 formBuilder 创建表单。

您将数据传递给 MatDialog 实例的 open 方法。

constructor(public dialog: MatDialog) {}

this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: user
});

user 是包含您将传递给模态的数据的变量。

我创建了一个 StackBlitz Project 来复制您的案例。让我知道这是否是您要找的。

我从 JSONPlaceholder API 中获取了数据，我只是反映了用户对 Material Table 而不是 AgGrid Table 所做的更改] 和你一样。

但是您的主要问题是在表单组件中获取 userId。所以这是在项目中复制的东西。这应该可以帮助您了解问题所在。

注意：确保使用以下版本以避免任何版本不匹配错误：

@angular/material - 6.4.6 @angular/animations - 6.0.5

请查看项目的依赖项部分，了解有关已安装包版本的更多信息。

Angular/aggrid:如何将行数据传递给表单？(Material对话框)

Angular/aggrid: How to pass row data to form?(Material Dialog)

httpclient

angular-material

ag-grid

angular