如何通过ngFor访问嵌套JSON中RAW内各货币的TYPE属性？

嘿，别着急！刚接触JSON和Angular的ngFor确实容易在嵌套对象遍历上卡壳，我来帮你搞定这个问题～

首先得明确：你的RAW是一个键值对对象（不是数组），而ngFor默认是用来遍历数组的，所以直接用会报错。我们需要先把这个对象转换成可遍历的结构，这里有两种简单的实现方式：

方法一：模板中直接用keyvalue管道（最快捷） #

Angular内置了keyvalue管道，可以把对象转换成{ key: string, value: any }格式的数组，完美适配ngFor。

假设你的组件里已经把JSON数据存在了currencyData变量中，模板代码可以这么写：

<!-- 遍历RAW下的所有货币，获取TYPE属性 -->
<div *ngFor="let item of currencyData?.RAW | keyvalue">
  货币标识：{{ item.key }}，TYPE属性：{{ item.value.TYPE }}
</div>

• currencyData?.RAW里的?.是安全导航操作符，避免数据未加载时出现空指针错误
• keyvalue管道帮你把RAW对象拆成了键值对数组，item.key是货币的名称（比如USD、BTC），item.value就是对应货币的完整对象，直接取TYPE就行

方法二：组件内预处理成数组（更灵活） #

如果需要对数据做额外处理（比如过滤、排序），可以在组件类里先把RAW对象转成数组：

组件TS代码：

// 假设你的原始JSON数据存在rawJson变量中
public currencyList: { code: string, type: string }[] = [];

ngOnInit(): void {
  // 遍历RAW对象的所有键，生成结构化数组
  if (this.rawJson?.RAW) {
    this.currencyList = Object.keys(this.rawJson.RAW).map(currencyKey => ({
      code: currencyKey,
      type: this.rawJson.RAW[currencyKey].TYPE
    }));
  }
}

然后模板里直接遍历预处理好的数组：

<div *ngFor="let currency of currencyList">
  货币标识：{{ currency.code }}，TYPE属性：{{ currency.type }}
</div>

额外提示 #

如果你的数据是通过HTTP请求异步获取的，记得结合async管道使用，比如：

<div *ngFor="let item of (currencyData$ | async)?.RAW | keyvalue">
  {{ item.key }}: {{ item.value.TYPE }}
</div>

如果你的JSON结构和我假设的有差异（比如RAW下面还有更深的嵌套），可以把具体结构贴出来，我再帮你调整方案～

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