无法按“组（字符串）”字段对我的表进行分组

Question

我有一张表，该表显示了我可以通过C＃中的Get（int id）请求从数据库中获取的数据。我在一个环境中获得了详细信息，此后，我应该看到一组配置，例如：组1：一些数据，组2：一些数据。 简而言之，我需要按“分组”字段将configItems分组。 这些数据应该像表一样。

ConfigItem：

export class ConfigItem {
    id: number;
    name: string;
    productName: string;
    group: string;
    key: string;
    value: string;
    environmentTrs: EnvironmentTrs;
}

我的桌子：

<table mat-table [dataSource]="configList" class="mat-elevation-z8" style="width: 80%">  
                <ng-container matColumnDef="ProductName">
                  <th mat-header-cell *matHeaderCellDef> ProductName </th>
                  <td mat-cell *matCellDef="let config">{{config.productName}}</td>
                </ng-container>        
                <ng-container matColumnDef="Key">
                  <th mat-header-cell *matHeaderCellDef> Key </th>
                  <td mat-cell *matCellDef="let config"><b>{{config.key}}</b></td>
                </ng-container>  
                <ng-container matColumnDef="Value">
                    <th mat-header-cell *matHeaderCellDef> Value </th>
                    <td mat-cell *matCellDef="let config">{{config.value}}</td>
                </ng-container>    
                <ng-container matColumnDef="Group">
                    <th mat-header-cell *matHeaderCellDef> Group </th>
                    <td mat-cell *matCellDef="let config">{{config.group}}</td>
                </ng-container> 
                <ng-container matColumnDef="Actions">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let host">                    
                        <button (click)="onEditKey(config.id)" mat-button color="primary">Edit</button>             
                    </td>              
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

外观如何：

enter image description here