Angular/PrimeNG 每当单击 table 值时，在 index/value 处打开一个模态对话框

Question

**HTML CODE:**

<p-table [value]="SourcesEntities" styleClass="p-datatable-gridlines">
  <ng-template pTemplate="caption">
    <h2>Entities</h2>

    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <app-create-entity></app-create-entity>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
      <tr>
          <th>Entity Name</th>
          <th>Type</th>
          <th>Source</th>
          <th>Retrieval Frequency</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-entity let-rowIndex="rowIndex">
      <tr>
          <td>
            <button pButton
            label="{{entity.Ename}}"
            (click)="showDialog()"
            icon="pi pi-external-link"></button>
          </td>
          <td>{{entity.type}}</td>
          <td>{{entity.source}}</td>
          <td>{{entity.frequency}}</td>
      </tr>
      <!-- <p-dialog
      header="{{entity.Ename}} Attributes"
      [(visible)]="display"
      [breakpoints]="{'960px': '75vw', '640px': '100vw'}"
      [style]="{width: '50vw'}"></p-dialog> -->
  </ng-template>
</p-table>


***TS code:***

import { Component, OnInit, OnDestroy } from '@angular/core';
import {SourcesService} from '../sources.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-sources-entities',
  templateUrl: './sources-entities.component.html',
  styleUrls: ['./sources-entities.component.css']
})
export class SourcesEntitiesComponent implements OnInit {

  SourcesEntities = [];
  SourcesAttributes =  [];
  display: boolean = false;
      

  showDialog(){
    //this function should get the index from which entity is clicked
    //then return a dialog with the content of that index + its attributes!
    //ngFor somehow breaks the table
    console.log('entity clicked')
    this.display = true;
  }
}

***Service.ts code:***

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { SourcesLogService } from './Sourceslog.service';

@Injectable()
export class SourcesService {

  private  SourcesEntities = [
    {Ename: 'Employees', type:'DB Table', source: 'sourceA', frequency: 'RF'},
    {Ename: 'Product', type: 'Web Service', source: 'sourceB', frequency: 'RF'},
    {Ename: 'Movies', type: 'Source file', source: 'sourceC', frequency: 'RF'}
  ];
  
  //These are the attributes that should be shown when you click on an entity Ename. One for
  //each row. i.e. George for Employees


  private SourcesAttributes = [
    {name: 'George', type: 'sofware dev'},
    {name: 'PC', type:'gaming'},
    {name: 'Star-Wars: The Phantom Menace', type: 'Sci-fy'}
  ]   
}

So in Summary I want when click on a value in Entity Name column to pop a dialog just for that one entity cell/row that will consists of that entity's attributes {Name,Description}. Instead I am getting multiple dialogs one for each row/entity name I have in my table. Hope that helps, Let me know if I should make my question more clear or if something doesnt make sense please

I have tried using *ngFor="" but messes up with my table somehow...Probably I have used it on the wrong element or something. I am really new to angular so....

  [1]: https://i.stack.imgur.com/TMfb4.png

You can see in the image my attributeData declared as

attributeData = [{
                   header: [],
                   data: [{name:''},{type:''}]
                }]

If I dont declare it that way wont work. But still that way even if it works on my html attributeData.data.name data is not recognized. Sorry is just kind of confusing for me:/

Answer 1

通过将 header 名称和行索引传递给它来更新 showDialog() 函数。

** HTML Template **
(click)="showDialog(entity.Ename, rowIndex)" 

** Component TS File **
attributeData = {};
showDialog(headerText, rowIndex) {
    this.attributeData['header'] = headerText;
    this.attributeData['data'] = this.SourcesAttributes[rowIndex];
    this.display = true;
}

将 p-dialog 放在 p-table 的结束标记之后。

</p-table>
<p-dialog
 header="{{attributeData.header}} Attributes"
 [(visible)]="display"
 [breakpoints]="{'960px': '75vw', '640px': '100vw'}"
 [style]="{width: '50vw'}">
     Content Goes Here
     {{attributeData.data.name}}
     {{attributeData.data.type}}
</p-dialog>

Angular/PrimeNG 每当单击 table 值时，在 index/value 处打开一个模态对话框

Angular/PrimeNG open one modal dialog at index/value whenever clicking on that table value

modal-dialog

showdialog

ngfor

primeng

angular