如何在 Mat table 中的每一行的按钮单击事件下设置对话框的位置？

Question

这是我的示例代码。 I created code here please see my working code here

我尝试设置一个对话框的位置

dialogConfig.position = { top: '370px',left: '500px'}

但是对于每一行，它都在相同的位置打开。

在这里，我需要在“更改请求”按钮上的每一行下方打开一个对话框。

以下代码用于对话框

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment) {
const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

dialogConfig.data = {
  Id: Id,
  Reason: Reason,
  StatusDescription: StatusDescription
};
 dialogConfig.position =  {
    top: '370px',
    left: '500px'
  }


const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
  data => {
    console.log("Dialog output:", data)
   
  }
);

}

Answer 1

我假设您想在打开对话框的按钮正下方显示对话框。这可以通过使用按钮的坐标定位对话框来完成。

我们可以使用事件侦听器提供的事件参数来做到这一点。只需在视图文件中 openDialog 函数调用的开头添加 $event，并在 openDialog 的函数定义中添加事件参数。我们可以使用 event.target.getBoundingClientRect() 获取元素的相对视口位置。这将包含目标元素（在我们的示例中为按钮）的 x、y 坐标以及宽度和高度。您可以使用 x 和 y 坐标作为对话框配置的值。

下面已经完成了URL

https://stackblitz.com/edit/angular-zw5byw?file=src/app/payments/payments.component.ts

我已经使用宽度和高度属性（以及一些常量）在按钮周围移动对话框。随意根据您的需要进行调整

如何在 Mat table 中的每一行的按钮单击事件下设置对话框的位置？

How can I set position of a dialog box under the button click event of each row in Mat table?

angular-material

angular

material-table

mat-dialog