Question

我在Angular 7项目中使用primeNg（版本：7）在表中创建多级行组时遇到了麻烦。我必须显示数据，其中我的第一级扩展基于记录的状态，然后第二级的扩展基于另一列。而且，在最后两列的表格中，我需要汇总第一级和第二级的金额。

目前，我已经尝试使用（数据表的后继产品）和树表，但是它们都不在帮助我。当我使用时，我可以显示第一级分组，但在第二级显示该分组不起作用。

我曾尝试使用（数据表的后继产品）和树表，但它们都不在帮助我。我指的是以下示例：

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 };
                    }
                }
            }
        }

    }
}

如果特定计划有多个记录，则应位于同一节点下。它不应一次又一次地创建相同的子节点。有关详细信息，请单击链接并参考Image to show current and expected behaviour

任何帮助都是真的。

使用primeNg创建2级行扩展时出现问题

0 个答案: