colSpanと行Spanがどのように材料テーブルヘッダーに追加されたかヘッダーAngular 7？

Question

追加しようとしていますrowSpan and colSpaninAngular material Table header。誰かが私がそれを達成するのを手伝ってくれる？.

以下は、マテリアルテーブルを使用して取得する添付ヘッダーです

Answer 1

あなたの例のためにこれを試してください

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <ng-container matColumnDef="state">
            <th mat-header-cell *matHeaderCellDef rowspan="2">state</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >alabama</td>
        </ng-container>
        <ng-container matColumnDef="utility">
            <th mat-header-cell *matHeaderCellDef rowspan="2">utility company</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >company1</td>
        </ng-container>
        <ng-container matColumnDef="data1">
            <th mat-header-cell *matHeaderCellDef>{{'data1' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >3.45</td>
        </ng-container>
        <ng-container matColumnDef="data2">
            <th mat-header-cell *matHeaderCellDef>{{'data2' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >1.73</td>
        </ng-container>
        <ng-container matColumnDef="data3">
            <th mat-header-cell *matHeaderCellDef>{{'data3' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" >0.58</td>
        </ng-container>

        <ng-container matColumnDef="summer">
            <th mat-header-cell *matHeaderCellDef colspan="3">{{'summer period' | translate}}</th>
        <td mat-cell *matCellDef="let company;let i = dataIndex" ></td>
        </ng-container>

 <tr mat-row *matHeaderRowDef="['state','utility','data1','data2','data3']"></tr>
 <tr mat-row *matHeaderRowDef="['summer']"></tr>
 <tr mat-row *matRowDef="let element; columns:['state','utility','data1','data2','data3']"></tr>
</table>

このように動作しないように見えるので、私は夏の行の順序を逆にします