如何使用 MatDialog 将行数据或数组对象传递给 Angular 中的组件

Question

我想要的是，当我单击特定行的按钮时，它应该打开一个 matDialog 框，它应该向我显示该行的所有内容。 这是html文件，

                           <tr *ngFor="let u of users">
                                <td data-label="ID">{{u.name}}</td>
                                <td>
                                    <button (click)="toggle(u)" mat-button type="button" class="btn btn-primary">
                                        Show Details
                                    </button>
                                </td>
                            </tr>

这是我的 ts 文件。

users = [
    {
      'name':'arjun'
    },
    {
      'name':'Karan'
    }
  ]


toggle(userRow:any){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  }

这是我将使用 MatDialogue 打开的组件 (UserDetailsPopUp) 的 html 文件。

<h1>Hello{{u.name}}</h1>

但我无法将切换功能中的行数据发送到此组件。我怎么做？并加载该数据并显示它。

Answer 1

像这样向对话框组件发送数据：

toggle(userRow:any){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    dialogConfig.data = userRow;
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  }

并捕获UserDetailsPopupComponent中的数据

constructor(@Inject(MAT_DIALOG_DATA) public _data: any) {}

_data 包含 userRow 数据。