Angular Mat-Table 如何跨越标题行答案

【问题标题】：Angular Mat-Table how to span the header rowAngular Mat-Table 如何跨越标题行
【发布时间】：2021-09-27 05:47:27
【问题描述】：

我想在 Mat Table 中使用多个标题行。我可以跨越列，但无法跨越行。

请看我的stackblitz demo

我想要跨行的最后一列“成本”。但我无法摆脱图像中额外的“成本”列。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您只需要决定要从哪一个中删除单词 cost。你是那个插入它两次的人。立即解决此问题并在顶行类型上删除它，反之亦然。或者你必须完全删除这条线，只留下后者。

<ng-container matColumnDef="header-row-third-group">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="1"></th>
</ng-container>

【讨论】：

我希望“成本”这个词跨行，但您的代码不起作用。

【解决方案2】：

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

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
  <!-- Position Column -->
 

     <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
      </ng-container>
    
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    
      <!-- Weight Column -->
      <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
      </ng-container>
    
      <!-- Symbol Column -->
      <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
      </ng-container>
    
      <!-- Cost Column -->
      <ng-container matColumnDef="cost">
        <th mat-header-cell *matHeaderCellDef> Cost </th>
        <td mat-cell *matCellDef="let element"> {{element.cost}} </td>
      </ng-container>
    
      <!-- Header row first group -->
      <ng-container matColumnDef="header-row-first-group">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="2">
          First group
        </th>
      </ng-container>
    
      <!-- Header row second group -->
      <ng-container matColumnDef="header-row-second-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Second group </th>
      </ng-container>
    
      <ng-container matColumnDef="header-col-third-group">
        <th mat-header-cell *matHeaderCellDef [attr.colspan]="1" [attr> cost </th>
      </ng-container>
      <!-- Header row third group -->
    
    
      <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

【讨论】：

这是不对的，因为它显示了两个“成本”字样。可以试试吗？
我更新了它，现在它是一列，但是由于第三列，您的表格仍然需要一些工作 - 它需要扩展到第一行和第二行。将继续它一分钟。
不这么认为。我可以在不使用第三组的情况下达到相同的结果。请发布你的堆栈闪电战。