onRowSelect / onRowClick 根本没有被触发。 - Primeng table - Angular

onRowSelect / onRowClick not getting triggered at all. - Primeng table - Angular

我实际上需要遍历到另一个组件,其中包含单击行时选择的数据。我一直在使用 p-table 来执行相同的操作。我完全不知道为什么。 onRowClick / onRowSelection 不会在 all.I 触发,甚至添加了 console.log 字符串以查看是否至少调用了方法,但没有。甚至 [(selection)] 也表现不佳。 p-table 没有问题,因为分页和全局过滤器实际上运行良好并且没有问题。但这是我无法弄清楚原因的事情。 Primeng 版本 "primeng": "^7.1.3"

<p-table [columns]="cols" [value]="companiesList"  selectionMode="single"
   (onRowClick)="handleSelect($event)" 
  >
      <ng-template pTemplate="header" let-columns>
          <tr>
              <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                  {{col.header}}
                  <p-sortIcon [field]="col.field"></p-sortIcon>
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr>
              <td *ngFor="let col of columns">
                      {{rowData[col.field]}}
              </td>
          </tr>
      </ng-template>
  </p-table>

可能的替代解决方案:在 <tr> 标记中,添加 (click)="handleSelect(rowData)" 并删除 (onRowClick) 处理程序。

理由:

  • 如果 (onRowClick) 绑定不起作用,请绑定到不同的事件。
  • let-rowData 迭代中的 rowData 具有行中的信息,这似乎是您需要传递给其他组件的信息。
  • 这种方法在过去对我来说很成功,p-table 可以在用户点击某行时进行捕捉。

虽然很久以前就提出了这个问题,但也许这会对其他人有所帮助。

事件不是onRowClick(),而是onRowSelect() 所以你需要说:

    <p-table [columns]="cols" [value]="companiesList"  selectionMode="single"
   (onRowSelect)="handleSelect($event)"

还有一个 onRowUnselect() 可用。还要确保在行的 html:

中指明行是可选的
<ng-template pTemplate="body" let-rowData let-columns="columns">
   <tr [pSelectableRow]="rowData">