Question

我已经使用角材料组件实现了一个样例的angular应用程序。我在主页上制作了一个简单的表格，其中包含员工详细信息。

我需要选择雇员行，并根据选定的行绑定弹出窗口中的数据。

任何机构都可以帮助我如何访问弹出式窗口中的选定行数据吗？......

任何帮助将不胜感激....！

Answer 1

您将需要使用MAT_DIALOG_DATA将数据注入到对话框组件中...我可以在您的项目中看到导入的数据，因此您似乎已经意识到了这一部分，但是可能对如何实现它有些困惑。 ..请参见下面。

您还需要导入注入

import {MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { Inject } from '@angular/core';

然后在您的OpenPopup类构造函数设置中注入MAT_DIALOG_DATA，如下所示。

请注意：您需要使用 data 变量访问传递到对话框中的所有数据。

 export class OpenPopup {

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<OpenPopup> ) {

   }

然后在TableComponent类的openPopup（）方法中，将所选数组传递到对话框中

let dialogRef = this.dialog.open(OpenPopup, {
      width: '600px', height: '400px',
      data: this.selection['_selected']
    });

在对话框内部，像这样在HTML中使用它。

请注意：：由于此示例将整个选定的数组传递给对话框，因此该示例通过[0]索引静态访问了第一个选择行。如果您打算将多个值传递给对话框，则需要修改对话框中的html以处理该问题...如果您只想传递一行，则请修改openPopup（）方法中的data变量，并且只传递一个在那里。

<h3>Update Row Data</h3><br/>
{{data | json}}



<!-- -------- INPUT FIELDS ----------  --> 
<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="First Name "  id="" name="" [value]="data[0].empName">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Last Name "  id="" name="" [value]="data[0].empName">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Title "  name="" [value]="data[0].title">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Address "  name="" [value]="data[0].address">
    </mat-input-container>
</div>
<br/><br/>

如何使用角材料将Mat表中的选定行数据绑定到有角的弹出输入字段中

1 个答案: