Angular5中如何动态渲染含可变键的API返回JSON为表格

嘿，我之前也碰到过这种动态键的表格渲染问题，在Angular 5里完全能解决，给你捋个可行的方案：

步骤1：组件里处理数据，提取动态表头 #

首先，你从API拿到JSON数组后，得先把动态的键（也就是表头）提取出来。这里假设返回的数组里每个对象的键都是一致的，我们可以从第一个对象里获取所有键作为表头。同时要处理数据为空的情况，避免报错。

组件代码示例：

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

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  tableData: any[] = [];
  tableHeaders: string[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // 替换成你的实际API接口地址
    this.http.get<any[]>('your-api-endpoint').subscribe(data => {
      this.tableData = data;
      // 提取表头：数据非空时，取第一个对象的所有键
      if (this.tableData.length > 0) {
        this.tableHeaders = Object.keys(this.tableData[0]);
      }
    });
  }
}

步骤2：模板里渲染动态表格 #

接下来在HTML模板里，用*ngFor循环渲染表头和每一行的内容。这里要注意，当数据还没加载完成（比如API请求还在pending）的时候，要做判断避免空指针报错。

模板代码示例：

<table *ngIf="tableData.length > 0" border="1">
  <thead>
    <tr>
      <!-- 循环渲染动态表头 -->
      <th *ngFor="let header of tableHeaders">{{ header }}</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环每一行数据 -->
    <tr *ngFor="let row of tableData">
      <!-- 循环匹配表头对应的单元格值 -->
      <td *ngFor="let header of tableHeaders">{{ row[header] }}</td>
    </tr>
  </tbody>
</table>

<!-- 数据为空或未加载时的提示 -->
<div *ngIf="tableData.length === 0">暂无数据</div>

为什么之前的方案显示为空？ #

大概率是这两个原因：

1. 数据加载时机问题：模板渲染时API数据还没返回，此时tableData是空数组，表头也没提取到，导致表格无内容。上面的代码用*ngIf="tableData.length > 0"确保只有数据加载完成后才渲染表格，就能避免这个问题。
2. 表头提取错误：如果API返回空数组，或者你没正确从对象中提取键，会导致表头为空，表格自然显示空白。代码里的if (this.tableData.length > 0)判断，正好规避了这种情况。

你可以试试这个方案，应该能正常渲染动态键的表格啦！

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