Colspan и rowspan в коврике

Question

У меня есть эта таблица в стандартном HTML, и я хочу преобразовать ее в MatTable. Но у меня есть некоторые проблемы, чтобы понять, как работает таблица матов, особенно с моим набором данных, который не является классом c.

Вот моя таблица на данный момент:

Сгенерированы group1 и group2 (может быть больше групп), у меня есть мой заголовок, подобный этому:

{ 
Group1: 
   firstRow: [Y, B, ...]
   secondRow: [Y, M, ...]
Group2:
   ...
}

И у меня есть тот же шаблон для моих данных, поэтому в настоящее время у меня есть некоторые ngfor в моей таблице, чтобы сделать их.

Есть ли у вас какие-либо идеи о том, как я могу преобразовать это в таблицу матов? Я не могу найти решение, чтобы сделать мой заголовок.

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

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef [ngStyle]="{ display: 'none' }">
        Date
      </th>
      <td mat-cell *matCellDef="let data">
        {{ data.date| date: "E, dd/MM/yyyy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="time">
      <th mat-header-cell *matHeaderCellDef [ngStyle]="{ display: 'none' }">
        Time
      </th>
      <td mat-cell *matCellDef="let data">
        {{ utils.timeToString(data.time) }}
      </td>
    </ng-container>



    <ng-container matColumnDef="Date">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="3">Date</th>
    </ng-container>
    <ng-container matColumnDef="Time">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="3">
        Departure time
      </th>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="['Date', 'Time']"
    ></tr>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

Вот также то, что я пытаюсь сделать строку групп:

 <ng-container
      *ngFor="let group of data.groups"
      [matColumnDef]=" ?? what to put here "
 >
   <th
     mat-header-cell
     *matHeaderCellDef
     mat-sort-header
     [attr.colspan]="group.letters.length"
   >
     {{ group.name }}
   </th>
 </ng-container>