如何基于动态JSON数据在Angular 2中创建矩阵表格？

没问题，我来帮你搞定这个动态矩阵表格！你的需求是把按测试项分组的JSON数据，转换成以环境（A/B/C...）为行、测试项（Test1/Test2...）为列的矩阵，而且数据规模是动态的对吧？下面分两步来实现：

1. 转换数据结构（TypeScript部分） #

原始数据是按测试项来组织的，但咱们渲染表格的时候更需要按环境分组的结构，这样每一行对应一个环境，遍历测试项就能填充单元格。我写个简单的转换函数：

import { Component } from '@angular/core';

@Component({
  selector: 'app-matrix-table',
  templateUrl: './matrix-table.component.html',
  styleUrls: ['./matrix-table.component.css']
})
export class MatrixTableComponent {
  // 你的原始数据（注意把数字里的逗号改成点，JS/TS里数字用点做小数分隔）
  originalData = [
    { 
      "test": "Test1", 
      results: [
        { "env": "A", "result": 1.5 }, 
        { "env": "B", "result": 1.8 }, 
        { "env": "C", "result": 1.6 }
      ] 
    }, 
    { 
      "test": "Test2", 
      results: [
        { "env": "A", "result": 1.8 }, 
        { "env": "B", "result": 1.6 }, 
        { "env": "C", "result": 1.6 }
      ] 
    },
    { 
      "test": "Test3", 
      results: [
        { "env": "A", "result": 1.6 }, 
        { "env": "B", "result": 1.9 }, 
        { "env": "C", "result": 1.8 }
      ] 
    }
  ];

  // 转换后的结构：key是环境名，value是该环境下所有测试项的结果
  matrixData: { [key: string]: { [testName: string]: number } } = {};
  // 提取所有测试项名称（作为表头）
  testNames: string[] = [];
  // 提取所有环境名称（作为行标题）
  envNames: string[] = [];

  ngOnInit() {
    // 先提取所有测试项名称
    this.testNames = this.originalData.map(item => item.test);
    
    // 遍历每个测试项的结果，填充matrixData
    this.originalData.forEach(testItem => {
      testItem.results.forEach(result => {
        // 如果环境还没在matrixData里，先初始化
        if (!this.matrixData[result.env]) {
          this.matrixData[result.env] = {};
        }
        // 给当前环境的当前测试项赋值
        this.matrixData[result.env][testItem.test] = result.result;
      });
    });

    // 提取所有环境名称
    this.envNames = Object.keys(this.matrixData);
  }

  // 辅助函数：获取指定环境和测试项的结果，没有的话返回'-'
  getResult(env: string, testName: string): string | number {
    return this.matrixData[env]?.[testName] ?? '-';
  }
}

2. 编写模板（HTML部分） #

用Angular的*ngFor动态生成表头和表格行，完全适配数据的动态变化：

<table border="1" cellpadding="8" cellspacing="0">
  <!-- 表头行：第一列是空，后面是所有测试项 -->
  <thead>
    <tr>
      <th></th>
      <th *ngFor="let test of testNames">{{ test }}</th>
    </tr>
  </thead>
  <!-- 表格主体：每一行对应一个环境 -->
  <tbody>
    <tr *ngFor="let env of envNames">
      <!-- 行标题：环境名称 -->
      <td><strong>{{ env }}</strong></td>
      <!-- 遍历测试项，填充对应结果 -->
      <td *ngFor="let test of testNames">
        {{ getResult(env, test) }}
      </td>
    </tr>
  </tbody>
</table>

关键说明 #

• 数据转换部分：把原始的“测试项→环境→结果”结构，转换成“环境→测试项→结果”，这样渲染时更直观
• getResult函数：处理边界情况，如果某个环境没有某个测试项的结果，会显示-，避免报错
• 完全动态适配：不管测试项数量增加到多少，或者环境数量变化，表格都会自动调整

你可以直接把这段代码放到你的Angular组件里，替换成你自己的原始数据就能用啦！

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