Angular中如何使用*ngFor遍历嵌套JSON并获取数据？

错误原因 #

myData.data.ZSLatencies是一个键值对对象（键为"Recharging API Latency"，对应的值是延迟数据数组），而Angular的*ngFor指令只能遍历可迭代对象（如数组），直接遍历对象会触发错误。

解决方案 #

下面提供两种可行的实现方式：

方式1：在模板中使用keyvalue管道 #

利用Angular内置的keyvalue管道将对象转换为可遍历的键值对数组，直接在模板中处理：

<div *ngFor="let entry of myData.data.ZSLatencies | keyvalue">
  <!-- 展示API名称 -->
  <h3>{{ entry.key }}</h3>
  <!-- 遍历延迟数据数组 -->
  <div *ngFor="let latency of entry.value">
    <p>{{ latency[0] }}: {{ latency[1] }} 次</p>
  </div>
</div>

方式2：在组件类中预处理数据 #

提前将对象转换为结构化数组，让模板逻辑更简洁：

1. 在组件类中添加处理逻辑：

// 定义数据类型（可选，增强类型安全）
interface LatencyItem {
  apiName: string;
  latencies: [string, number][];
}

latencyData: LatencyItem[] = [];

ngOnInit(): void {
  // 将对象转换为数组
  this.latencyData = Object.entries(this.myData.data.ZSLatencies).map(([key, value]) => ({
    apiName: key,
    latencies: value
  }));
}

2. 在模板中遍历预处理后的数组：

<div *ngFor="let item of latencyData">
  <h3>{{ item.apiName }}</h3>
  <div *ngFor="let latency of item.latencies">
    <p>{{ latency[0] }}: {{ latency[1] }} 次</p>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Md Ratan Hossain