如何使用Angular实现数组从列到行的转置？

转换前的列结构数组示例： #

[
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Allan"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Melanie"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Angelo"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Matthew"}
]

转换后的行结构数组示例： #

[
  {name: "Allan", component: "Knowledge", score: "2"},
  {name: "Allan", component: "Performance", score: "1"},
  {name: "Allan", component: "Skill", score: "1.5"},
  {name: "Allan", component: "Understanding", score: "2"},
  {name: "Melanie", component: "Knowledge", score: "2"},
  {name: "Melanie", component: "Performance", score: "1"},
  {name: "Melanie", component: "Skill", score: "1.5"},
  {name: "Melanie", component: "Understanding", score: "2"},
  {name: "Angelo", component: "Knowledge", score: "2"},
  {name: "Angelo", component: "Performance", score: "1"},
  {name: "Angelo", component: "Skill", score: "1.5"},
  {name: "Angelo", component: "Understanding", score: "2"},
  {name: "Matthew", component: "Knowledge", score: "2"},
  {name: "Matthew", component: "Performance", score: "1"},
  {name: "Matthew", component: "Skill", score: "1.5"},
  {name: "Matthew", component: "Understanding", score: "2"}
]

实现方法 #

直接用TypeScript（Angular默认开发语言）的数组方法就能完成转换，核心思路是遍历原数组的每个对象，把除name外的每个键值对拆分成独立的行对象，最后扁平化结果数组。

1. 组件内直接实现转换函数

在Angular组件中定义转换方法：

transformColumnToRow(originalData: any[]): any[] {
  return originalData.flatMap(item => {
    // 解构分离name和评分字段
    const { name, ...scores } = item;
    // 把评分字段的键值对转成目标结构
    return Object.entries(scores).map(([component, score]) => ({
      name,
      component,
      score
    }));
  });
}

调用方式：

// 原数组
originalArray = [
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Allan"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Melanie"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Angelo"},
  {Knowledge: "2",Performance: "1",Skill: "1.5",Understanding: "2",name: "Matthew"}
];

// 转换后的数组
transformedArray = this.transformColumnToRow(this.originalArray);

2. 自定义管道（可复用）

如果需要在多个组件模板中复用转换逻辑，可以创建自定义Angular管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'columnToRow' })
export class ColumnToRowPipe implements PipeTransform {
  transform(originalData: any[]): any[] {
    // 空数组判断，避免报错
    if (!originalData || !Array.isArray(originalData)) return [];
    
    return originalData.flatMap(item => {
      const { name, ...scores } = item;
      return Object.entries(scores).map(([component, score]) => ({
        name,
        component,
        score
      }));
    });
  }
}

在模块中声明管道后，模板里直接使用：

<!-- 遍历转换后的数组 -->
<div *ngFor="let item of originalArray | columnToRow">
  {{ item.name }} - {{ item.component }}: {{ item.score }}
</div>

关键逻辑说明 #

• flatMap()：遍历原数组的每个元素，同时将每个元素生成的子数组扁平化，最终得到一维数组
• 对象解构：快速分离name字段和其他评分字段
• Object.entries()：将评分对象转换为[键, 值]格式的数组，方便映射成目标结构

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