Angular material 如何将colSpan和row Span添加到物料表标题7？

我正在尝试将

行span和列span

添加到

角材质表格标题中。有人能帮我实现吗

下面是附加的标题，我想得到使用材料表

<table mat-table> 
 <ng-container matColumnDef="{{displayedColumns[0]}}">
    <th
      mat-header-cell
      class="text-center"
      *matHeaderCellDef>          
    </th>
    <td
      mat-cell
      class="text accent text-center"
      *matCellDef="let item">
    </td>
    <!-- usage example -->
    <td
      [attr.colspan]="displayedColumns.length"
      mat-footer-cell
      *matFooterCellDef>
    </td>
 </ng-container>
        .............
 <tbody>
   <tr
     mat-header-row
     class="mat-table-row-sm header-accent-separator"
     *matHeaderRowDef="displayedColumns; sticky: true"></tr>
   <tr
     mat-row
     class="mat-table-row-sm"
     *matRowDef="let row; columns: displayedColumns;"></tr>
   <tr
     mat-footer-row
     class="mat-table-row-sm position-relative"
     *matFooterRowDef="[displayedColumns[0]]; sticky: true">
    <!-- matFooterRowDef can be the count of columns -->
   </tr>
 </tbody>
</table>

如果要使用本机表格功能，如colspan和rowspan，则需要使用：

<table mat-table>

  ...

</table>


...

参考：

例如：


Ref:
我有一个像你一样的示例任务。我只是很容易用第二个标题显示“无”


不
{{element.position}
不

这是我的结果

您可以通过我的链接了解更多信息：
对于您的示例，请尝试以下内容

    <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>


状态
阿拉巴马州
公用事业公司
公司1
{{'data1'| translate}
3.45
{{'data2'| translate}
1.73
{{'data3'| translate}
0.58
{{‘夏季’|翻译}

我只是颠倒了夏季争吵的顺序，因为似乎不是这样的
我遇到了同样的问题，从前面的答案中获得了一些灵感，发现下面的方法非常有效

要实现问题中提供的示例，需要两个表头。第一个将包含
状态
、
公用事业公司
和
夏季
列，而第二个将包含
数据1
、
数据2
和
数据3
列。要执行此操作，请从以下内容开始：



这段代码创建了一个包含两个表头行的表，对于数据源中的每个数据点，一行包含5个单元格，这些单元格使用提供的列

要正确设置这些标题行的样式，我们需要使用
rowSpan
和
colSpan
。对于每个列，我们创建
ng容器
：


陈述
此处的状态名称（例如{{data.State}}）
公用事业公司
这里是公用事业公司
夏天
数据1
{{data.yourFirstDataPoint}
数据2
{{data.yourSecondDataPoint}
数据3
{{data.yourdatapoint}

这将为您创建所需的结果。如果需要，还可以将
mat sort
定义添加到列中。我希望这是有意义的，如果没有，请告诉我，我将尝试扩展我的答案。
我刚刚在我的材料表上使用了
[attr.colspan]
和
[attr.rowspan]

<table mat-table> 
 <ng-container matColumnDef="{{displayedColumns[0]}}">
    <th
      mat-header-cell
      class="text-center"
      *matHeaderCellDef>          
    </th>
    <td
      mat-cell
      class="text accent text-center"
      *matCellDef="let item">
    </td>
    <!-- usage example -->
    <td
      [attr.colspan]="displayedColumns.length"
      mat-footer-cell
      *matFooterCellDef>
    </td>
 </ng-container>
        .............
 <tbody>
   <tr
     mat-header-row
     class="mat-table-row-sm header-accent-separator"
     *matHeaderRowDef="displayedColumns; sticky: true"></tr>
   <tr
     mat-row
     class="mat-table-row-sm"
     *matRowDef="let row; columns: displayedColumns;"></tr>
   <tr
     mat-footer-row
     class="mat-table-row-sm position-relative"
     *matFooterRowDef="[displayedColumns[0]]; sticky: true">
    <!-- matFooterRowDef can be the count of columns -->
   </tr>
 </tbody>
</table>


.............
我一直在寻找将固定柱效果与colSpan相结合的方法。这帮了大忙。但是它只适用于较旧的标签，而不是标签。我看到它也适用于标签。使用mat table对我来说没有意义。对于像
[attr.rowspan]=“2”
这样简单的硬编码内容，您可以只使用一个更简单的
rowspan=“2”
，因为它是静态的，不需要是动态的，同样的事情也适用于样式设置
style=“display:none；”“
也适用于隐藏的单元格。