Angular从数组获取数据生成动态表格失败求助

嘿，我明白你现在的困扰——明明API返回的数据已经拿到了，用*ngFor却死活生成不出想要的表格。别着急，咱们一步步来解决：

首先得确认下，你从API拿到的debugQueryData应该是对象数组（比如[{id: 1, name: "张三"}, {id:2, name:"李四"}]这种结构）对吧？你之前的代码直接遍历整个数组元素，自然拿不到作为表头的对象键啦。

第一步：先在组件里提取表头 #

咱们先从数组的第一个对象里把所有键抽出来，作为表头数组。在你的组件.ts文件里加这段代码：

// 定义一个存表头的数组
headers: string[] = [];

// 假设你在ngOnInit或者API回调里拿到了debugQueryData
ngOnInit() {
  // 先判断数组有没有数据，避免报错
  if (this.debugQueryData?.length > 0) {
    // 提取第一个对象的所有键作为表头
    this.headers = Object.keys(this.debugQueryData[0]);
  }
}

第二步：在模板里循环生成表格 #

接下来就可以在HTML模板里分别渲染表头和表格内容了：

渲染表头 #

用刚才生成的headers数组循环：

<thead>
  <tr>
    <th style="text-align:center" *ngFor="let header of headers">
      {{header}}
    </th>
  </tr>
</thead>

渲染表格内容 #

先循环每一行数据，再通过表头的键去取对应的值：

<tbody>
  <tr *ngFor="let item of debugQueryData">
    <td style="text-align:center" *ngFor="let header of headers">
      {{item[header]}}
    </td>
  </tr>
</tbody>

为啥你之前的代码没效果？ #

你原来写的*ngFor="let row of debugQueryData"是遍历数组里的每一个对象，直接输出row的话，浏览器会把它转换成[object Object]，根本不是你要的表头键，所以自然看不到正确内容啦。

额外加分：处理空数据场景 #

万一API返回空数组，加个判断避免页面空落落的：

<!-- 空数据提示 -->
<div *ngIf="debugQueryData?.length === 0" style="text-align:center; padding: 20px;">
  暂无数据哦～
</div>

<!-- 有数据才显示表格 -->
<table *ngIf="debugQueryData?.length > 0" border="1" cellpadding="8">
  <!-- 上面的thead和tbody放这里 -->
</table>

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