Angular 16中API响应无法自动转为Map的问题及解决咨询

从Java服务器获取如下JSON响应，在Angular 16中通过HttpClient请求并映射到MyClass类型，其中MyClass的runs字段定义为Map<string, AnotherObject>。但调用this.details.runs.entries()等Map方法时出现错误：ERROR TypeError: this.details.runs.entries is not a function。需要了解无法自动转换的原因及手动转换方法。

JSON响应示例 #

{
  "summary": {
    
  },
  "runs": {
    "key_1": {
      "object_1": {
        
      },
      "object_2": {
        
      }
    },
    "key_2": {
      "object_1": {
        
      },
      "object_2": {
        
      }
    }
  }
}

服务代码 #

public getDetailsV2(id: number): Observable<MyClass> {
    return this.httpClient.get<MyClass>(
      'url_to_endpoint'
    );
}

调用代码 #

this.service.getDetailsV2(1).subscribe({
      next: (details) => {
        this.details = details;
      }
});

MyClass定义 #

export class MyClass {
  runs: Map<string, AnotherObject>;
}

Angular的HttpClient仅做类型断言，不会真正将JSON对象转换为Map实例。JSON中的runs本质是普通JavaScript键值对对象，TypeScript的类型定义仅为编辑器提供语法提示，运行时该值仍为普通对象，并非Map，因此调用entries()这类Map专属方法会触发类型错误。

方法1：订阅响应时直接转换 #

在组件订阅响应后，手动将runs对象转为Map：

this.service.getDetailsV2(1).subscribe({
  next: (rawDetails) => {
    const runsMap = new Map<string, AnotherObject>();
    // 遍历原始对象的键值对，存入Map
    Object.entries(rawDetails.runs).forEach(([key, value]) => {
      runsMap.set(key, value as AnotherObject);
    });
    // 组装成正确的MyClass实例
    this.details = {
      ...rawDetails,
      runs: runsMap
    } as MyClass;
  }
});

方法2：用RxJS操作符在服务层转换（推荐） #

在服务的Observable流中完成转换，让组件直接拿到可用的MyClass实例：

import { map } from 'rxjs';

public getDetailsV2(id: number): Observable<MyClass> {
  return this.httpClient.get<MyClass>('url_to_endpoint').pipe(
    map(rawData => {
      // 利用Object.entries直接生成Map的键值对数组
      const runsMap = new Map<string, AnotherObject>(
        Object.entries(rawData.runs) as [string, AnotherObject][]
      );
      return {
        ...rawData,
        runs: runsMap
      } as MyClass;
    })
  );
}

方法3：给MyClass添加静态转换方法 #

在MyClass中定义静态方法，专门处理从JSON到类实例的转换：

export class MyClass {
  runs: Map<string, AnotherObject>;
  summary: any; // 对应JSON中的summary字段

  static fromJson(json: any): MyClass {
    const instance = new MyClass();
    instance.summary = json.summary;
    // 直接将JSON对象的键值对转为Map
    instance.runs = new Map<string, AnotherObject>(
      Object.entries(json.runs) as [string, AnotherObject][]
    );
    return instance;
  }
}

之后在服务中使用该方法：

import { map } from 'rxjs';

public getDetailsV2(id: number): Observable<MyClass> {
  return this.httpClient.get('url_to_endpoint').pipe(
    map(json => MyClass.fromJson(json))
  );
}

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