Как colSpan и row Span добавляются в таблицу материалов Header Angular 7?

Question

Я пытаюсь добавить rowSpan and colSpan в Angular material Table header.Может ли кто-нибудь помочь мне достичь этого.

Ниже приведен прикрепленный заголовок, который я хочу получить с помощью таблицы материалов

Answer 1

У меня есть пример задачи, как вы.Я просто не могу отобразить ни один со вторым заголовком.

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

 <!-- first stage header -->
  <ng-container matColumnDef="No">
    <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">No</th>
  </ng-container>

Вот мой результат

Вы можете перейти по моей ссылке, чтобы узнать больше: StackBlitz

Answer 2

Если вы хотите использовать функции родной таблицы, такие как colspan и rowspan, вам нужно будет использовать:

<table mat-table>

  ...

</table>

Ссылка: Теги собственных элементов таблицы

Например:

Ссылка: Serendipity CRM