在Angular中如何将对象数组渲染为指定格式的HTML表格

嘿，这个需求其实挺常见的，咱们一步步来搞定它～

首先，你手里的原始数据是扁平的对象数组，直接用*ngFor渲染成目标表格会有点麻烦，所以第一步得先把数据转换成更适合表格展示的结构：

1. 在组件类中处理数据 #

咱们先提取出唯一的x值作为表格的列标题，唯一的y值作为每行的行标题，然后为每个y匹配对应各个x的val值。直接上代码：

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

@Component({
  selector: 'app-table-demo',
  templateUrl: './table-demo.component.html',
  styleUrls: ['./table-demo.component.css']
})
export class TableDemoComponent implements OnInit {
  // 你的原始数据
  rawData = [
    {"x":1,"y":10,"val":13},
    {"x":1,"y":20,"val":15},
    {"x":2,"y":10,"val":12},
    {"x":2,"y":20,"val":16}
  ];

  // 表格的列标题（存储唯一的x值）
  tableHeaders: number[] = [];
  // 表格的行数据：每个元素包含y值和对应的val数组
  tableRows: { y: number, vals: number[] }[] = [];

  ngOnInit(): void {
    // 提取并排序所有唯一的x值
    this.tableHeaders = Array.from(new Set(this.rawData.map(item => item.x)))
      .sort((a, b) => a - b);
    
    // 提取并排序所有唯一的y值
    const uniqueYs = Array.from(new Set(this.rawData.map(item => item.y)))
      .sort((a, b) => a - b);
    
    // 构建每行的数据：为每个y匹配对应x的val
    this.tableRows = uniqueYs.map(y => {
      const vals = this.tableHeaders.map(x => {
        const matchedItem = this.rawData.find(item => item.x === x && item.y === y);
        // 如果没有匹配项，返回空字符串（你也可以改成其他默认值）
        return matchedItem ? matchedItem.val : '';
      });
      return { y, vals };
    });
  }
}

2. 编写HTML模板渲染表格 #

有了处理好的数据，接下来就可以用Angular的*ngFor指令循环渲染表头和行了：

<table border="1">
  <!-- 表头行：左上角留空，后面是x值 -->
  <tr>
    <th></th>
    <th *ngFor="let header of tableHeaders">{{ header }}</th>
  </tr>
  <!-- 数据行：每行先显示y值，再依次显示对应的val -->
  <tr *ngFor="let row of tableRows">
    <td>{{ row.y }}</td>
    <td *ngFor="let val of row.vals">{{ val }}</td>
  </tr>
</table>

3. 可选：添加样式让表格更美观 #

如果觉得默认表格太丑，可以在组件的CSS里加一点样式：

table {
  border-collapse: collapse;
  margin: 20px;
}

th, td {
  padding: 8px 15px;
  text-align: center;
  border: 1px solid #ccc;
}

th {
  background-color: #f5f5f5;
}

这样渲染出来的表格就完全符合你想要的格式啦～

备注：内容来源于stack exchange，提问作者MHDaouas