如何将Angular Material Table的单列拆分为5个列

实现步骤 #

1. 调整组件类中的列配置
   首先修改你组件.ts文件里的displayedColumns数组，移除原来的symbol字段，替换为你要拆分的5个新列标识，示例如下：

// 原配置
// displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
// 修改后的配置，5个新列的标识可根据你的实际业务命名
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol_col1', 'symbol_col2', 'symbol_col3', 'symbol_col4', 'symbol_col5'];

同时要确保你的数据源dataSource里的每条数据，已经包含这5个新列对应的字段，比如每条数据结构类似：

export interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  // 替换原有的单个symbol字段，改为5个对应字段
  symbol_col1: string;
  symbol_col2: string;
  symbol_col3: string;
  symbol_col4: string;
  symbol_col5: string;
}

如果你的原数据里symbol是数组格式（比如symbol: ['H', 'He', 'Li', 'Be', 'B']），可以直接在模板里取数组下标即可，不需要调整数据源结构。

2. 修改表格模板的列定义
   把模板中原先单个Symbol列的ng-container删除，替换为5个新列的定义，完整的模板代码如下：

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <!-- 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>

    <!-- 拆分后的5个Symbol列 开始 -->
    <ng-container matColumnDef="symbol_col1">
      <th mat-header-cell *matHeaderCellDef>Symbol列1</th>
      <!-- 如果是独立字段就用这个写法 -->
      <td mat-cell *matCellDef="let element">{{ element.symbol_col1 }}</td>
      <!-- 如果原symbol是数组，就用下面这个写法替换上面的td
      <td mat-cell *matCellDef="let element">{{ element.symbol[0] }}</td>
      -->
    </ng-container>
    <ng-container matColumnDef="symbol_col2">
      <th mat-header-cell *matHeaderCellDef>Symbol列2</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol_col2 }}</td>
      <!-- 数组写法：{{ element.symbol[1] }} -->
    </ng-container>
    <ng-container matColumnDef="symbol_col3">
      <th mat-header-cell *matHeaderCellDef>Symbol列3</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol_col3 }}</td>
      <!-- 数组写法：{{ element.symbol[2] }} -->
    </ng-container>
    <ng-container matColumnDef="symbol_col4">
      <th mat-header-cell *matHeaderCellDef>Symbol列4</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol_col4 }}</td>
      <!-- 数组写法：{{ element.symbol[3] }} -->
    </ng-container>
    <ng-container matColumnDef="symbol_col5">
      <th mat-header-cell *matHeaderCellDef>Symbol列5</th>
      <td mat-cell *matCellDef="let element">{{ element.symbol_col5 }}</td>
      <!-- 数组写法：{{ element.symbol[4] }} -->
    </ng-container>
    <!-- 拆分后的5个Symbol列 结束 -->

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements"> </mat-paginator>
</div>

如果需要给拆分后的列做统一的表头合并，可以额外加一个表头行，用colspan属性合并前三个列，剩下5个列对应Symbol的总表头，示例如下：

<!-- 加在原有表头行的上方 -->
<tr mat-header-row *matHeaderRowDef="['mergedHeader']"></tr>
<ng-container matColumnDef="mergedHeader">
  <th mat-header-cell *matHeaderCellDef colspan="3">基础信息</th>
  <th mat-header-cell *matHeaderCellDef colspan="5">Symbol</th>
</ng-container>

内容的提问来源于stack exchange，提问作者denisiulian