primeNG Turbo表的两级行扩展

Question

用primeng turbo表扩展添加两个级别的行扩展的好方法是什么？

我已经尝试过思考如何做到这一点，因为它似乎并不是开箱即用的。

下面的行组只有一个行扩展模板。我希望它看起来像网站上的第一个选项（此处），但在数据下方还有另一个切换行（两个级别）

<h3 class="first">Toggleable Row Groups</h3>
<p-table [value]="cars" dataKey="brand">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex">
        <tr>
            <td>{{rowData.vin}}</td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
    </ng-template>
    <!-- Is it possible to add another row expansion here? -->
</p-table>

Answer 1

感谢 @SebOlens 的定向帮助，下面是实现二级扩展的一种方法。

1. 在 pTemplate=body 中，在最后一个 TR 之后，添加一个 ng-container，其中包含要添加的数据的上下文

2. 添加扩展模板。在模板中，仅当单击第二级扩展时才使行可见（即使用“viewDetails”等属性）

3. 在 pTemplate 正文中的任意位置添加下拉 V 形图标。单击时切换“viewDetails”的值

这是 stackblitz 链接：https://stackblitz.com/edit/angular-rzu7rt

模板代码：

<h3 class="first">Toggleable Row Groups</h3>
<p-table [value]="cars" dataKey="brand">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded" let-columns="columns">
        <tr class="ui-widget-header" *ngIf="rowGroupMetadata[rowData.brand].index === rowIndex">
            <td colspan="3">
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                    <span>{{rowData.brand}}</span>
                </a>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex" let-rowData.viewDetails="false">
        <tr>
            <td>{{rowData.vin}}
                <! -- added row expansion chevron -->
                    <i (click)="rowData.viewDetails = !rowData.viewDetails" [ngClass]="rowData.viewDetails ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
            </td>
            <td>{{rowData.year}}</td>
            <td>{{rowData.color}}</td>
        </tr>
        <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
        <ng-template #extensiontemplate>
            <tr *ngIf="rowData.viewDetails">
                <td colspan="3">
                    Additional row data here for VIN ID: {{rowData.vin}}                  
                </td>
            </tr>
        </ng-template>
    </ng-template>
</p-table>