Question

我的数据源如下所示

[{"isGroup":true,"groupName":"MV Reddy","items":[{"id":1,"name":"MV Reddy","verticalid":5,"vertical":"Colocation - Large > 20 Racks","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2019},{"id":10,"name":"MV Reddy","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020}]},{"isGroup":true,"groupName":"Neeraj Jha","items":[{"id":2,"name":"Neeraj Jha","verticalid":4,"vertical":"Alliances","target":"70","sap":"20","colo":"30","others":"20","quarter":2,"year":2019},{"id":5,"name":"Neeraj Jha","verticalid":4,"vertical":"Alliances","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2019}]},{"isGroup":false,"groupName":"Suresh Rathod","items":[{"id":3,"name":"Suresh Rathod","verticalid":3,"vertical":"C4C India (Public Cloud)","target":"100","sap":"20","colo":"30","others":"50","quarter":1,"year":2019}]},{"isGroup":false,"groupName":"Arun Dubey","items":[{"id":4,"name":"Arun Dubey","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":4,"year":2019}]},{"isGroup":true,"groupName":"Atin Singh","items":[{"id":6,"name":"Atin Singh","verticalid":5,"vertical":"Colocation - Large > 20 Racks","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":7,"name":"Atin Singh","verticalid":2,"vertical":"IAAS and Rest of Ctrls Services","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":8,"name":"Atin Singh","verticalid":3,"vertical":"C4C India (Public Cloud)","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":9,"name":"Atin Singh","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020}]}]

我这样写/打印了表格：

<table class="mat-elevation-z8 " mat-table matSort [dataSource]='targetData' (matSortChange)="sortData($event)">
    <ng-container matColumnDef="Employee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee </th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].name}}
        </td>
    </ng-container>

    <ng-container matColumnDef="groupData">

        <ng-container *matCellDef="let group">
            <ng-container *ngFor="let groupCol of group.items;index as i;">
                <ng-container *ngIf="i==0 else newRow;">
                    <td mat-cell rowspan="group.items.length">
                        {{group.groupName}}
                    </td>
                    <td mat-cell>
                        {{groupCol.vertical}}
                    </td>
                    <td mat-cell>
                        {{groupCol.target}}
                    </td>
                    <td mat-cell>
                        {{groupCol.sap}}
                    </td>
                    <td mat-cell>
                        {{groupCol.colo}}
                    </td>
                    <td mat-cell>
                        {{groupCol.others}}
                    </td>
                </ng-container>
                <ng-template #newRow>
                    <tr mat-row>
                        <td mat-cell>
                            {{groupCol.vertical}}
                        </td>
                        <td mat-cell>
                            {{groupCol.target}}
                        </td>
                        <td mat-cell>
                            {{groupCol.sap}}
                        </td>
                        <td mat-cell>
                            {{groupCol.colo}}
                        </td>
                        <td mat-cell>
                            {{groupCol.others}}
                        </td>
                    </tr>
                </ng-template>

            </ng-container>
        </ng-container>

    </ng-container>

    <ng-container matColumnDef="Vertical">
        <th mat-header-cell *matHeaderCellDef>Vertical</th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].vertical}} </td>
    </ng-container>
    <ng-container matColumnDef="Target">
        <th mat-header-cell *matHeaderCellDef>Target</th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].target}} </td>
    </ng-container>
    <ng-container matColumnDef="SAP">
        <th mat-header-cell *matHeaderCellDef>SAP</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].sap}}</td>
    </ng-container>
    <ng-container matColumnDef="COLO">
        <th mat-header-cell *matHeaderCellDef>COLO</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].colo}}</td>
    </ng-container>
    <ng-container matColumnDef="Others">
        <th mat-header-cell *matHeaderCellDef>Others</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].others}}</td>
    </ng-container>
    <ng-container matColumnDef="Action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
        <td mat-cell *matCellDef="let element">
            <div class="tableActions ">

                <button class="view mat-button" (click)='edit(element.items[0])'>
                    <i class="material-icons">
                        create
                    </i>
                </button>
            </div>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="TargetTable;"></tr>
    <tr mat-row *matRowDef="let row; columns: TargetTable;"></tr>
    <tr mat-row *matRowDef="let row; columns: ['groupData']; when: isAGroup"></tr>
</table>

在遍历我的数据时，我无法在表中打印另一行

最终结果应如下所示。

Answer 1

当您使用rowspan属性时，您的方法会朝着正确的方向发展。但是，模板是不必要的复杂操作，如果预处理数据，则可以简化模板。

我使用Koia类解决了开源项目RowSpanComputer中的类似问题。然后，在summary-table.component.html内，将计算出的行跨度用于定义rowspan元素的td属性。

[attr.rowspan]="rowSpans[iCol][iRow].span"

RowSpanComputer类为指定表数据（行数组）中的每个单元格计算rowspan。只要它们的值保持不变并且位于左侧的单元格也被覆盖，它基本上遍历行并为单元格增加rowspan。值更改后，相应的rowspan就会重置为零。

请查看以下使用您提供的数据的StackBlitz。很显然，必须对此进行进一步改进，以获得所需的结果。

更新

如果即使没有跨越位于左侧的单元格，也要为单元格应用rowspan，只需从RowSpanComputer类中删除以下行即可。

spanColumnContexts.slice(iCol + 1).forEach(c => c.spannedRow = {});

我在此StackBlitz中这样做了，为了避免混淆，将RowSpanComputer重命名为GroupingRowSpanComputer。

Answer 2

我的桌子：

<table mat-table matSort [dataSource]="targetData" class="mat-elevation-z8">

    <ng-container matColumnDef="Employee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee </th>
        <td mat-cell *matCellDef="let element" [attr.rowspan]="rowSpanLength(element)"
            [style.display]="rowSpanLength(element)>0 ? ''  : 'none'">
            {{element.name}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Vertical">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vertical </th>
        <td mat-cell *matCellDef="let element"> {{element.vertical}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Target">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Target </th>
        <td mat-cell *matCellDef="let element"> {{element.target}}
        </td>
    </ng-container>
    <ng-container matColumnDef="SAP">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> SAP </th>
        <td mat-cell *matCellDef="let element"> {{element.sap}}
        </td>
    </ng-container>
    <ng-container matColumnDef="COLO">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> COLO </th>
        <td mat-cell *matCellDef="let element"> {{element.colo}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Others">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Others</th>
        <td mat-cell *matCellDef="let element"> {{element.others}}
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="TargetTableColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: TargetTableColumns"></tr>
</table>

我的 rowSpanLength 函数如下：

rowSpanLength(item) {
    let nameArr = this.targetData.filter(i => i.name === item.name);
    //return length if the item is first element in above array else 0
    return nameArr[0].id === item.id ? nameArr.length : 0;
}

如果项目/ tr是组中的第一个项目，此功能将保持rowSpan，对于所有其他项目，名称td将被隐藏。

结果如下所示，这正是我想要的。来自@uminder（https://stackoverflow.com/users/2358409/uminder）stackblitz

遍历数据时的角材料行

2 个答案: