如何在Angular中从HTTPClient接收Map对象

Question

这是来自rest端点的返回类型：

ResponseEntity<Map<String, List<Object>>>

我如何接收来自Angular方面的响应？

我尝试过这种方法：

let requiredData= new Map<String, Array<Object>>();
this.service.getMap().subscribe((mapData) => {
requiredData= mapData;
}

我可以正确地将其记录在控制台中。但问题是，每当我尝试从地图中提取项目或按以下方式提取密钥时，它总是返回未定义

requiredData.keys

有人知道这里出了什么问题吗？

Answer 1

在TS中，您可以使用RECORD类型来处理贴图。针对您的情况尝试以下操作：

requiredData: Record<String,Object[]>;
this.service.getMap()
.subscribe((mapData: Record<String,Object[]>) => {
this.requiredData= mapData;
});

在您的服务中：

getMap(): Observable<Record<String,Object[]>> {
return this.http.get<Record<String,Object[]>>(
'your end point'
);
}

要显示提取的数据，请在HTML中尝试以下操作：

<ng-container *ngFor="let dataObject of requiredData | keyvalue">
<p>This is the string key : {{ dataObject.key }}</p>
<div *ngFor="let object of dataObject.value">
<!--Replace id/name with your params-->
{{object.id}} -  {{object.name}}
</div>

Answer 2

返回新HttpClient的默认值为Object。它在内部自动调用response.json()。

您可以告诉HttpClient响应的类型，因此：

this.httpClient.get<User[]>(...)
.map((users) => {
...