Angular对接Spring返回的双层Map无法通过get方法取值如何解决？

错误原因 #

Angular HttpClient的get方法指定的泛型仅做编译时类型校验，不会在运行时自动转换返回值结构：
Spring后端返回的Map结构在JSON序列化后，对应的是JS普通键值对对象，不是JS原生的Map实例，因此不具备get、set等Map原型方法，调用pr.get()自然会报错。

解决方案 #

方案1：直接使用对象属性访问（最简单，无需转换） #

把代码里的类型声明从Map改为普通对象类型，用方括号语法访问属性即可：

// 调整泛型类型为普通对象结构
getData(): Observable<Record<number, Record<string, boolean>>> {
  const endpointUrl = this.apiUri + '/info';
  return this.http.get<Record<number, Record<string, boolean>>>(endpointUrl);
}

getAll() {
  this.getData().subscribe((data) => {
    let pr = data;
    // 用方括号访问属性，等价于原Map的get方法效果
    console.log(pr[1]['A']);
  });
}

Record<K, V>是TS内置工具类型，等价于键类型为K、值类型为V的普通对象结构，完全适配后端序列化后的Map返回值。

方案2：转换为原生JS Map（如果确实需要使用Map的API） #

如果业务逻辑依赖Map的原型方法（比如遍历、统计大小等），可以手动把返回的普通对象转成双层Map：

// 先导入rxjs的map操作符
import { map } from 'rxjs';

getData(): Observable<Map<number, Map<string, boolean>>> {
  const endpointUrl = this.apiUri + '/info';
  return this.http.get<Record<number, Record<string, boolean>>>(endpointUrl).pipe(
    // 手动转换为双层Map结构
    map(data => {
      const outerMap = new Map<number, Map<string, boolean>>();
      Object.entries(data).forEach(([outerKey, innerObj]) => {
        // 外层对象的键序列化后是字符串，要转成number匹配类型定义
        const outerNumKey = Number(outerKey);
        const innerMap = new Map<string, boolean>(Object.entries(innerObj));
        outerMap.set(outerNumKey, innerMap);
      });
      return outerMap;
    })
  );
}

getAll() {
  this.getData().subscribe((pr) => {
    // 此时pr是真正的Map实例，可以正常调用get方法
    console.log(pr.get(1).get('A'));
  });
}

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