使用角度 10 从 HTTP GET 返回 HashMap

Posted 2023-02-27

【中文标题】使用角度 10 从 HTTP GET 返回 HashMap

【英文标题】：Return a HashMap from HTTP GET using angular 10

【发布时间】：2020-11-18 02:33:00

【问题描述】：

我正在使用以下版本。 角 CLI：10.0.1

节点：12.18.2

操作系统：win32 x64

角度：10.0.2

我有一个 Java spring boot 服务（运行良好），它以 HashMap 的形式返回数据。

Map<String, List<String>>

以下是服务调用的输出：

// 20200728103825
// http://localhost:1234/config-data


  "books": [
    "ABC",
    "PQR",
    "XYZ",
    "QWT",
    "LMN",
  ],
  "categories": [
    "FICTION",
    "DRAMA"
  ]

我还有一个简单的调用，它返回书籍列表（作为字符串）。例如

// 20200728112259
// http://localhost:1234/book-data

[
  "ABC",
  "PQR",
  "XYZ",
  "QWT",
  "LMN",
]

现在，我想在我的 Angular 代码中使用它。

我的服务定义如下。

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';

@Injectable(
  providedIn: 'root'
)
export class DataService 

  constructor(
    private http: HttpClient
  )  


  loadBookData()
    console.log("loadBookData Service");
    return this.http.get<string[]>('http://localhost:1234/book-data');
  

  loadConfigData() 
    console.log("loadConfigData Service");
    // Looking for help here
  

基本上我可以阅读书籍数据（字符串[]）。

但是，如何从服务中读取复杂的HashMap数据呢？

【参考方案1】：

你可以这样声明一个模型：

 export class Result
    books: string[];
    categories: string[];
 

您的 loadConfigData 应如下所示：

  loadConfigData() 
    console.log("loadConfigData Service");
        return this.http.get<Result>('http://localhost:1234/config-data')
                .pipe(
                  map((data:Result) => 
                    console.log(data.books);
                    console.log(data.categories);
                  )
                 );