如何在未知字典键名时渲染Angular中的字典数据？

组件逻辑处理 #

在组件中安全获取数据的键名列表，推荐用Object.keys()替代for-in循环，更简洁安全：

// 组件.ts 文件
users: any[] = [];
columns: string[] = [];

// 获取后端数据后执行的方法
fetchData() {
  // 模拟后端返回的动态结构数据
  this.users = [
    { name: 'John', age: '20' },
    { name: 'Jane', age: '22' }
  ];

  // 确保数组非空时再提取键名，避免报错
  if (this.users.length > 0) {
    this.columns = Object.keys(this.users[0]);
  }
}

HTML模板渲染 #

通过嵌套*ngFor实现动态渲染：外层循环遍历数据列表，内层循环遍历键名列表，用方括号语法user[col]动态取值（变量作为属性名时不能用点语法）：

<table border="1">
  <!-- 动态表头 -->
  <thead>
    <tr>
      <th *ngFor="let col of columns">{{ col }}</th>
    </tr>
  </thead>
  <!-- 动态表体 -->
  <tbody>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{ user[col] }}</td>
    </tr>
  </tbody>
</table>

注意事项 #

• 必须先确认users数组有数据再提取键名，否则this.users[0]会导致空指针错误；
• 如果后端返回的列表中存在键名不一致的对象，可根据需求选择取第一个有效对象的键，或合并所有对象的键（需额外处理逻辑）。

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