[英]Angular/PrimeNG open one modal dialog at index/value whenever clicking on that table value
**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}.
因此,总而言之,我希望在单击实体名称列中的一个值时弹出一个对话框,仅针对该实体单元格/行,该实体单元格/行将由该实体的属性 {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.
我曾尝试使用 *ngFor="" 但不知何故弄乱了我的桌子......可能我在错误的元素或其他东西上使用了它。 I am really new to angular so....
我对 angular 真的很陌生,所以....
[1]: https://i.stack.imgur.com/TMfb4.png
You can see in the image my attributeData declared as
您可以在图像中看到我的 attributeData 声明为
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.
但即使它适用于我的 html attributeData.data.name 数据仍然无法识别。 Sorry is just kind of confusing for me:/
抱歉让我有点困惑:/
Update the showDialog() function by passing the header name & rowIndex to it.通过将 header 名称和 rowIndex 传递给它来更新 showDialog() function。
** 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; }
Place the p-dialog after the closing tag of p-table.将 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.