将动态 Json 解析为 Angular 中的地图答案

【问题标题】：Parsing Dynamic Json into a Map in Angular将动态 Json 解析为 Angular 中的地图
【发布时间】：2020-04-08 19:46:51
【问题描述】：

我使用 Angular 的 http 客户端从 API 检索数据。我使用 typescript 接口定义 DTO。其中一个端点返回一个 json 对象，该对象具有我想映射到 Map 的动态键。我尝试了各种方法。

export interface ItemDistribution {
  id: number;
  distribution: Map<string, number>; // I don't know the keys beforehand
}

interface Distribution {
   [key: string]: number;
}

export interface ItemDistribution {
  id: number;
  distribution: Distribution; // I don't know the keys beforehand
}

但是，如果我用http.get<ItemDistribution>(myUrl) 调用后端，结果会被解析为一个JavaScript 对象。我知道我可以在对象上使用Object.entries(...)，但是可以直接获取地图吗？

【问题讨论】：

标签： angular typescript dictionary httpclient

【解决方案1】：

要理解的关键是，当您向 Angular HttpClient 调用添加一个类型时，例如 http.get<SomeObject>('http://api/some-end-point')，根本没有任何映射发生。

你得到的是一个从 JSON 中解析出来的对象。您指定的那种类型只是一个转换，实际上没有任何转换。如果 JSON 对象中的数据与类型不匹配，则没有错误或警告，只是不符合您的代码期望的类型，您可能会遇到运行时错误。

这对于简单对象很有用，其中属性仅限于字符串和数字以及字符串、数字和数组的数组。如果你有更复杂的东西，比如地图，你需要自己从 JSON 对象转换它。

所以，不，您无法从 HttpClient 调用返回的 JSON 对象中获取 Map - 您需要使用 Object.keys() 或 Object.entries() 或类似的东西来做到这一点。

【讨论】：