单击该行即可扩展prime-ng的p表行

Question

此处的链接https://www.primefaces.org/primeng/#/table/rowexpansion显示了p-table的示例，其中可以通过单击使用伪指令pRowToggler的第一列来扩展行。

我正在尝试通过单击行中任何位置的行来实现这种切换。

我试图寻找这样的例子，但找不到。 我还尝试过将[pRowToggler]上的ng-template用于该行，但这也不起作用。

有人可以指导我如何实现这种行为吗？

Answer 1

使表行可选，并将行数据包装到链接中

<ng-template  pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns" class="ui-resizable-column">
        <a href="#" [pRowToggler]="rowData">
            {{rowData[col.field]}}           
            </a>
            </td>
        </tr>
    </ng-template>

有一个示例项目，它并不完美，需要完成一些修饰工作，但它表明了这个想法

https://stackblitz.com/edit/angular-primeng-width-7wnyzv?file=src/app/app.component.ts

Answer 2

我的解决方案-只需在dlbclick事件上调用toggleRow：

<p-table #table [value]="value">
   ...
   <ng-template pTemplate="body" let-item let-expanded="expanded">
      <tr (dblclick)="table.toggleRow(item, $event)">
   ...