如何在mat-cell中获取数据并以对话框形式显示Angular 7？

Question

我正在尝试使 mat-cell 可点击并在 mat-dialog 中显示表单字段，并使用 mat-cell 中的数据填充这些字段。

这是我当前的显示，但我希望它位于单击它的垫单元格旁边。

这是 stackblitz 中的代码。 https://stackblitz.com/edit/angular-akbfr8

任何帮助都可以。谢谢

Answer 1

您需要使用配置对象上的 data 属性将数据传递到模式。

let dialogRef = dialog.open(YourDialog, {
  data: { name: 'austin' },
});

然后您可以通过将数据注入模态框的构造函数来使用该数据，如下所示：

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { name: string }) { }
}

您可以在文档中阅读更多相关信息：https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-

要使对话框出现在打开它的单元格旁边，您需要设置对话框的位置。为此，将配置对象中 position 属性的 left 和 top 属性定义为单元格的右侧。

dialog.open(YourDialog, {
  position: {
    left: `${cellElement.offsetLeft + cellElement.offsetWidth}px`,
    top: `${cellElement.offsetTop + cellElement.offsetHeight}px`,
  }
})

我已经更新了您的 stackblitz 以演示此行为。

如何在mat-cell中获取数据并以对话框形式显示Angular 7？

How to get data in mat-cell and display in dialog form Angular 7?

angular

angular7

angular-material-table

Stackblitz