如何基于动态JSON键渲染DOM表格并修正Angular代码显示错误

一、调整Component.ts的数据处理逻辑 #

从接口获取数据后，按需求整理出固定+动态排序的表头，确保列顺序符合要求：

import { Component, OnInit } from '@angular/core';
import { YourApiService } from './your-api.service';

// 定义数据结构，包含固定字段和动态数字键
interface DefectData {
  SysID: string;
  'Defect Classification': string;
  [key: string]: string;
}

@Component({
  selector: 'app-defect-table',
  templateUrl: './defect-table.component.html',
  styleUrls: ['./defect-table.component.css']
})
export class DefectTableComponent implements OnInit {
  defectList: DefectData[] = [];
  tableHeaders: string[] = [];

  constructor(private apiService: YourApiService) { }

  ngOnInit(): void {
    this.apiService.getDefectData().subscribe(data => {
      this.defectList = data;
      if (this.defectList.length) {
        // 固定前两列的表头顺序
        const fixedHeaders = ['SysID', 'Defect Classification'];
        // 提取所有数字键并按数字升序排序
        const numericHeaders = Object.keys(this.defectList[0])
          .filter(key => !isNaN(Number(key)))
          .sort((a, b) => Number(a) - Number(b));
        // 合并得到最终表头数组
        this.tableHeaders = [...fixedHeaders, ...numericHeaders];
      }
    });
  }
}

二、修正Component.html的表格渲染逻辑 #

按照整理好的表头顺序，循环渲染表头和每一行的列内容，确保内容与表头一一对应：

<table border="1">
  <thead>
    <tr>
      <th *ngFor="let header of tableHeaders">{{ header }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of defectList">
      <td *ngFor="let header of tableHeaders">{{ item[header] }}</td>
    </tr>
  </tbody>
</table>

核心修正点 #

• 表头排序：强制固定前两列，动态数字键按数值升序排列，避免键名字符串排序导致的顺序混乱（比如"10"排在"2"前面）。
• 内容对齐：通过统一的表头数组循环渲染列内容，彻底解决之前循环逻辑错误导致的内容错乱问题。
• 类型兼容：使用接口索引签名[key: string]: string兼容动态数字键，避免Angular模板中的类型报错。

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