Angular读取嵌套Map数据值失败，无法正常展示内容求助

1. 先把API返回的JSON转为原生Map结构 #

Angular HTTP请求返回的是普通JS对象，不是Map类型——你直接赋值给Map<number, Map<Job, number>>只是类型断言，实际数据还是普通对象，无法被keyvalue管道正确解析。必须手动转成原生Map：

在subscribe回调里处理数据：

this.yourApi.getData().subscribe((response: any) => {
  this.listData = new Map();
  response.forEach((item: any, idx: number) => {
    // 把内层对象转为Map<Job, number>
    const innerMap = new Map();
    // 若Job是自定义类型，需要把字符串key转回Job实例
    Object.entries(item).forEach(([keyStr, value]) => {
      const job = JSON.parse(keyStr) as Job;
      innerMap.set(job, value);
    });
    this.listData.set(idx, innerMap);
  });
});

2. 修正HTML模板的遍历逻辑 #

内层的item.value是Map，必须加keyvalue管道才能遍历，且要正确访问key和value属性（不是keys）：

<div class="viewing" *ngFor="let item of listData | keyvalue">
  {{ item.key }}
  <div *ngFor="let innerItem of item.value | keyvalue">
    <!-- 若Job是自定义对象，可显示其具体属性，比如innerItem.key.jobName -->
    {{ innerItem.key }}: {{ innerItem.value }}
  </div>
</div>

3. 注意自定义类型Job的序列化问题 #

后端返回的Job数据是JSON字符串格式，转为Map后默认key是字符串，不是Job实例。如果业务需要用Job类型操作，必须把字符串key手动转为Job对象（如上代码中JSON.parse(keyStr) as Job的步骤）。

内容的提问来源于stack exchange，提问作者ציפי גולדברג