具有rowGroup的垫表

Question

在我的Mat-table中，我需要显示如下图所示的结果，并在其中指定项目的特定属性的行。

我正在关注以下示例： stackblitz，但在我的情况下，我正在将当前项目属性与先前的属性进行比较，如果这些属性不同，则需要显示rowGroup 我不知道这是否是正确的材料方法，但是在进行这种比较的方法中，我无法获得先例。

方法

isGroup(index, item: AccessLog): boolean {
  if (index == null) return false;
    if (this.accesslogs && this.accesslogs.length > 0) {
      if (index == 0) return true;
      else {
        if (item.remoteAddress == this.accesslogs[index - 1].remoteAddress) {
          return false;
        } else {
          return true;
        }
      }
    }
    return false;
}

HTML

  <table mat-table [dataSource]="accesslogs" class="example-table" matSort (matSortChange)="temp($event)">
    <!-- Number Column -->
    <ng-container matColumnDef="createdDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.createddate" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.createdDate | date: ("pattern.datehourmin" | translate) }}</td>
    </ng-container>


    <ng-container matColumnDef="remoteAddress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "accesslogs.table.headers.remoteaddress" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.remoteAddress }}</td>
    </ng-container>

    <!-- Created Column -->
    <ng-container matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>{{ "accesslogs.table.headers.useragent" | translate }}</th>
      <td mat-cell *matCellDef="let row">{{ row.userAgent | ellipse: 50 }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <!-- Group header -->
    <ng-container matColumnDef="groupHeader">
      <td colspan="999" mat-cell *matCellDef="let row">
        <strong>ip {{ row.remoteAddress }}</strong>
      </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup"></tr>
  </table>