Как связать данные выбранной строки из таблицы Mat с всплывающими полями ввода в угловых, используя угловой материал

Question

Я реализовал пример углового приложения с использованием угловых компонентов материала. Я взял простую таблицу на главной странице с данными о сотрудниках.

Мне нужно выбрать строку сотрудника, и на основе выбранной строки мне нужно связать данные во всплывающем окне.

Может ли любое тело, пожалуйста, помогите мне, как получить доступ к выбранным данным строки в моем всплывающем окне .......?

Пожалуйста, войдите в мой образец приложения здесь

Любая помощь будет принята с благодарностью ....!

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> ) {

   }

Затем в вашем методе openPopup () вашего класса TableComponent передайте выделенный массив в ваш диалог

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

Оказавшись внутри вашего диалога, используйте его в HTML, как это.

Обратите внимание: Поскольку в этом примере весь выбранный массив передается в диалоговое окно, он получает статический доступ к первой строке выбора через индекс [0]. Если вы намереваетесь передать в диалоговое окно несколько значений, вам потребуется пересмотреть html в диалоговом окне, чтобы обработать это ... если вы намерены пропустить только одну строку, то пересмотрите переменную данных в вашем методе openPopup () и передайте только одно есть.

<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/>