时间戳

首页 > 解决方案 > 单击行时扩展 prime-ng 的 p-table 行

angular - 单击行时扩展 prime-ng 的 p-table 行

问题描述

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

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

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

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

标签： angularprimengprimeng-datatable

解决方案

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

<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

推荐阅读