Angular material 循环数据时的角度材质行

我的数据源如下所示

[{"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>

受雇者
{{element.items[0].name}
{{group.groupName}
{{groupCol.vertical}}
{{groupCol.target}
{{groupCol.sap}}
{{groupCol.colo}}
{{groupCol.others}
{{groupCol.vertical}}
{{groupCol.target}
{{groupCol.sap}}
{{groupCol.colo}}
{{groupCol.others}
竖的
{{element.items[0]。垂直}
目标
{{element.items[0].target}
液
{{element.items[0].sap}
科洛
{{element.items[0].colo}
其他
{{element.items[0].其他}
行动
创造

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

最终结果如下所示

---

当您使用

行span

属性时，您的方法是正确的。但是，该模板不必要且复杂，如果您预先处理数据，则可以简化该模板

在开源项目中，我使用一个类解决了一个类似的问题。在中，计算的行跨度随后用于定义

td

元素的

rowspan

属性

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

该类为指定表数据（行数组）中的每个单元格计算

行span

。它基本上在行上循环，并增加单元格的

rowspan

，只要它们的值保持不变，并且位于左侧的单元格也被跨越。一旦值发生变化，相应的

行span

将重置为零

请查看以下使用您提供的数据的内容。显然，为了获得您期望的结果，必须对其进行进一步改进

更新

如果要对单元格应用

rowspan

，即使左侧的单元格没有跨距，只需从

RowSpanComputer

类中删除以下行即可

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

---

为了避免混淆，我将

rowspan计算机重命名为
GroupingRowSpanComputer
。
我的表格：

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

如果item/tr是组中的第一个项，则此函数将保留rowSpan，对于其余所有项，名称td将被隐藏

结果如下所示，这就是我想要的。从@uminder（）stackblitz那里得到了这个想法
如果您可以看到，这不是在没有分组的情况下打印数据。我更新了我的答案，并提供了另一个StackBlitz，希望它能达到您的预期效果。在更新的StackBlitz中，我没有看到未分组的数据。我像下面那样解决了这个问题。我明确地筛选出了未分组的项，因为这就是我理解您的请求的方式。现在我更改了StackBlitz和包括非分组项目，请再次检查。在您的解决方案中，同一组中的相同列值不会合并。但如果结果符合你的期望，一切都很好。
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;
}