angular - 单击行扩展 prime-ng 的 p 表行

Question

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

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

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

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

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