Проблема создания 2 уровня расширения строки с использованием primeNg

Question

У меня проблемы с созданием многоуровневых групп строк в таблице с использованием primeNg (версия: 7) в моем проекте Angular 7.Я должен отобразить данные, где мой 1-й уровень расширения основан на статусе записи, а затем 2-й уровень расширения основан на другом столбце.И в таблице за последние 2 столбца мне нужно свести сумму как на 1-м уровне, так и на 2-м уровне.

В настоящее время я пытался использовать (наследник таблицы данных) и древовидную таблицу, но ни один из них не помог мне.Когда я использую то, я могу показать 1-й уровень группировки, но на 2-м уровне эта группа не работает.

Я пытался использовать (преемник данных) и таблицу дерева, но ни один из них не являетсяпомогая мне.Я ссылался на образец ниже:

https://stackblitz.com/edit/angular-rzu7rt

// HTML-файл

  <p-table [value]="homeModel.allWallets" dataKey="walletStatus" sortField="walletStatus"
                    sortMode="single" (onSort)="onAllWalletSort()" [responsive]="true">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>
                                <span>Wallet Name</span>
                            </th>
                            <th>
                                <span>Department</span>
                            </th>
                            <th>
                                <span>CIO</span>
                            </th>
                            <th>
                                <span>Status</span>
                            </th>
                            <th><span>Cash Plan For
                                    {{homeModel.planYear}}</span>
                            </th>
                            <th><span>PL Amount Plan For
                                    {{homeModel.planYear}}</span>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex" let-expanded="expanded"
                        let-columns="columns">
                        <tr class="ui-widget-header groupHeaderBackgroundColor"
                            *ngIf="allWalletsRowGroupMetadata[rowData.walletStatus].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><b>{{rowData.walletStatus}}</b></span>
                                </a>
                            </td>
                            <td><b># of Wallets:</b> {{rowData.walletsPerStatus}}</td>
                            <td><b>{{rowData.StatusLevelCashPlanAmountRollUp| currency :'USD'}} </b></td>
                            <td><b>{{rowData.StatusLevelPlAmountRollUp| currency : 'USD'}} </b>
                            </td>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="rowexpansion" let-rowData let-rowIndex="rowIndex"
                        let-rowData.viewDetails="false">
                        <tr>
                            <td colspan="3">{{rowData.initiativeName}}
                                <i (click)="rowData.viewDetails = !rowData.viewDetails"
                                    [ngClass]="rowData.viewDetails ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                            </td>
                            <td><b># of Wallets:</b> {{rowData.walletsPerInitiatives}}</td>
                            <td><b>{{rowData.initiativeLevelCashPlanAmountRollUp| currency :'USD'}} </b></td>
                            <td><b>{{rowData.initiativeLevelPlAmountRollUp| currency : 'USD'}} </b></td>
                        </tr>
                        <ng-container *ngTemplateOutlet="extensiontemplate; context: rowData"></ng-container>
                        <ng-template #extensiontemplate>
                            <tr *ngIf="rowData.viewDetails">
                                <td><a href="{{rowData.walletUrl}}">{{rowData.walletName}}</a></td>
                                <td>{{rowData.departmentName}}</td>
                                <td>{{rowData.cioId}}</td>
                                <td>{{rowData.walletStatus}}</td>
                                <td>{{rowData.cashPlan| currency :'USD'}} </td>
                                <td>{{rowData.plAmount| currency : 'USD'}} </td>
                            </tr>
                        </ng-template>
                    </ng-template>


                </p-table>

// component.ts

ngOnInit() 
{
this.homeModel.allWallets = this.homeService.getAllWallet();
updateAllWalletsRowGroupMetaData() {

        this.allWalletsRowGroupMetadata = {};
        if (this.homeModel.allWallets) {

            for (let i = 0; i < this.homeModel.allWallets.length - 1; i++) {
                let rowData = this.homeModel.allWallets[i];
                let walletStatus = rowData.walletStatus;

                if (i == 0) {
                    this.allWalletsRowGroupMetadata[walletStatus] = { index: 0, size: 1 };
                }
                else {
                    let previousRowData = this.homeModel.allWallets[i - 1];
                    let previousRowGroup = previousRowData.walletStatus;
                    if (walletStatus === previousRowGroup) {

                        this.allWalletsRowGroupMetadata[walletStatus].size++;
                    }
                    else {
                        this.allWalletsRowGroupMetadata[walletStatus] = { index: i, size: 1 };
                    }
                }
            }
        }

    }
}

Если естьЕсли несколько записей для конкретной инициативы, то должны находиться под тем же узлом.он не должен создавать один и тот же подузел снова и снова. Для получения подробной информации нажмите на ссылку и обратитесь к Изображение, чтобы показать текущее и ожидаемое поведение

Любая помощь будет действительно заметной.