单击该行扩展 prime-ng 的 p-table 行

Question

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

我正在尝试通过单击行上任意位置的行来实现此切换。

我曾尝试寻找这样的示例，但找不到。我也尝试在 ng-template 上使用 [pRowToggler] 作为该行，但这也没有用。

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

Answer 1

make table row selectable 并将行数据包装到 link

<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)">
   ...

单击该行扩展 prime-ng 的 p-table 行

Expanding the prime-ng's p-table row on click of the row

primeng

angular

primeng-datatable