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

Posted 2023-03-13

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

【英文标题】：how to pass a row data or the object of an array to a component in Angular using MatDialog

【发布时间】：2021-12-15 00:05:51

【问题描述】：

我想要的是，当我单击特定行的按钮时，它应该打开一个 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.;
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  

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

<h1>Hellou.name</h1>

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

【参考方案1】：

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

toggle(userRow:any)
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.;
    dialogConfig.data = userRow;
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  

并捕获UserDetailsPopupComponent中的数据

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

_data 包含 userRow 数据。

【讨论】：

非常感谢@Tushar，嗯，真的救了我的命.. 非常感谢