Angular mat-table实现多列数组元素拆分为行（类pandas explode）

解决思路 #

别在模板里硬拆数组，先把数据源转换成展开后的格式，再传给Mat-Table。这才是贴合Mat-Table设计逻辑的做法，比在模板里折腾靠谱多了。

具体步骤 #

1. 定义展开后的数据结构 #

先搞个新接口，对应展开后的单条数据——把原来的数组类型改成单值：

// 展开后的单条数据接口
export interface ExplodedExampleColumns {
  columnA: string;
  columnB: number;
  columnC: string;
}

// 原数据接口保留（用来存初始数据）
export interface ExampleColumns {
  columnA: string[];
  columnB: number[];
  columnC: string;
}

2. 写个函数转换数据 #

遍历原始数据，把每个带数组的条目拆成多条单值条目，同时把columnC的值对应到每条新数据里：

const EXAMPLE_DATA: ExampleColumns[] = [
  { columnA: ['A', 'B', 'C'], columnB: [1, 2, 3], columnC: 'apple' },
  { columnA: ['D', 'E'], columnB: [4, 5], columnC: 'banana' },
  { columnA: ['F'], columnB: [6], columnC: 'orange' }
];

// 转换函数：把原始数据拆成目标格式
function explodeData(originalData: ExampleColumns[]): ExplodedExampleColumns[] {
  const explodedData: ExplodedExampleColumns[] = [];
  
  originalData.forEach(item => {
    // 这里默认columnA和columnB长度一致，直接按索引遍历
    item.columnA.forEach((aVal, index) => {
      explodedData.push({
        columnA: aVal,
        columnB: item.columnB[index],
        columnC: item.columnC
      });
    });
  });
  
  return explodedData;
}

// 把转换后的数据作为数据源
dataSource = explodeData(EXAMPLE_DATA);
displayedColumns = ['columnA', 'columnB', 'columnC'];

3. 模板直接用原来的就行 #

现在每个数据源元素都是单值了，原来的Mat-Table模板不用改，直接复用：

<table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="columnA">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>A</th>
        <td mat-cell *matCellDef="let element"> {{element.columnA}} </td>
    </ng-container>

    <ng-container matColumnDef="columnB">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>B</th>
        <td mat-cell *matCellDef="let element"> {{element.columnB}} </td>
    </ng-container>

    <ng-container matColumnDef="columnC">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>C</th>
        <td mat-cell *matCellDef="let element">{{element.columnC}}</td>
    </ng-container>

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

为啥之前模板里用*ngFor没用？ #

Mat-Table是按dataSource里的每条数据生成一行，你在单元格里加*ngFor只会在同一个单元格里生成多个内容，没法拆出新行。提前处理数据源才是正确的路子。

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