Angular Http JSON 响应映射

Question

I am trying to map a Http JSON Response to a Custom Interface in Angular / typescript. 我已经尝试了几种方法，但还没有成功。 JSON object 未正确映射到接口。 map 属性保持“未定义”。 如果我直接打印数据，JSON 数据是正确的 output - 问题是我不知道如何访问它。 这是我的代码：

export interface IMap<T> {
map: Map<string, Array<T>>;
}

JSON 答案看起来像这样。 它是 Map<String,List<? >> 在 Java 中。

{
    "somenumbers": [
        20,
        40
    ],
    "somemorenumbers": [
        71,
        111
    ]
}

现在我尝试通过以下方式 map 它：

public getValues(
    paramList: Array<string>
): Observable<IMap<any>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http.get<IMap<any>>(url, { params });
}

在配置服务中，我订阅了方法。 如何正确 map 响应，以便数据中的属性 map 不是未定义的并且可以正确访问？

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: IMap<any>) => {
            //outputs the JSON Data as Object{somenumbers: Array(2), somemorenumbers: Array(2), map: Map(0)}
            console.error(data); 
            console.error(data.map);//map is undefined => ERROR
        });

如您所见，map 属性未定义。 它只是一个“地图：地图（0）”。 现在... - 我如何将 JSON 的东西放入导出界面？ map 属性应填充相关值。 我很感激任何帮助::)

Answer 1

如果我理解正确，您期望通过将<IMap<any>>添加到 get 调用中，它将返回映射到IMap的响应。 不会的，看看这个问题。

您可以做的是使用 rxjs map到 map 自己的响应，如下所示：

return this.http.get<IMap<any>>(url, { params }).pipe(
  map((response) => {
    // map the response here
  })
);

Answer 2

我意识到我实际上不需要导出接口并将代码更改为以下。 我花了一段时间才知道 xy 在 ts 中与 x["y"] 相同。 通过 response[parameter] 我可以动态访问响应 Object 的属性——这正是我所需要的。

public getValues(
    paramList: Array<string>
): Observable<Map<string, Array<any>>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http
        .get<any>(url, {
            params
        })
        .pipe(
            map(response => {
                let toReturn = new Map<string, any[]>();
                for (let parameter of paramList) {
                    toReturn.set(parameter, response[parameter]);
                }
                return toReturn;
            })
        );
}

映射现在有效。 JSON 的答案仍然与上述问题相同。

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: Map<string, any[]>) => {

            console.error(data);
        });

感谢@M Mansour 的帮助和链接！