Question

我正在使用RowGroup来存储3个不同的表，这很有效，但我的问题是 onRowSelect 功能根本不起作用，因为当我点击任何一行时RowGroup表，没有任何反应。

我还有一个名为“MY TABLE”的外部表，如果你单击任何一行，你会得到一个包含行信息的弹出窗口。这是我想要的RowGroup表的确切功能，但我无法让它工作。

这是我的工作代码：PLUNKER

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
    [sortableRowGroup]="false" [expandedRowsGroups]="expandedGroups">
  <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
<p-column field="status" header="ID"></p-column>
<p-column field="name" header="Title"></p-column>
</p-dataTable>

Answer 1

这是一个工作版本：
https://embed.plnkr.co/0o42Jb/

您必须添加(onRowClick)="handleRowSelect($event)"和

handleRowSelect(event) {
   console.log('yaaaaaaaaaaaw');
   this.display = true;
   this.personData = event.data.name;
}

Answer 2

呀！您必须使用 onRowClick 事件绑定而不是onRowSelect事件，这是您在外部表cal＆＃34; MY TABLE ＆＃34上使用的事件;

所以，在你的app.template.html：

<p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true"
        [sortableRowGroup]="false" [expandedRowsGroups]="expandedGroups" (onRowClick)="handleRowSelect($event)">
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template>
    <p-column field="status" header="ID"></p-column>
    <p-column field="name" header="Title"></p-column>
</p-dataTable>

在您的app.component.ts：

中

handleRowSelect(event) {
    //event.data = Selected row data
    this.display = true;
    this.personData = event.data.name;
}

您可以在ngprime docs event section上了解更多信息。

为什么$ event绑定不能使用PrimeNG在RowGroup表上工作？

2 个答案: