Question

我在Spring Boot应用程序上使用Angular5。我正在尝试以JSON返回Map。

春天：

//some method
return ResponseEntity.ok((new Gson()).toJson(/*My map object*/));

Angular5：

sql_list = new Map<string,string>();
this.myService.getQueries().subscribe(
    data => {
        console.log("Received data: ");
        console.log(data);
        this.sql_list = data;
        console.log(this.sql_list.get("query1"));
    } 
);

在客户端，我可以看到使用console.log可以很好地接收数据：

Received data:
{
  "query1" : "select * from test",
  "query2" : "select * from test2",
  "query3" : "select * from test3"
}

但是当尝试使用sql_list方法时，map.get(string key)对象给了我这个错误：

错误类型错误：_this.sql_list.get不是函数

我在那里犯了什么错误？

编辑：，在Florian回答后，此方法有效：

this.sql_list = new Map<string, string>(Object.entries(data));

Answer 1

在第一行中，创建一个地图：

sql_list = new Map<string,string>();

但是稍后，在数据处理程序中，您只是使用接收到的数据覆盖了该对象：

this.sql_list = data;

由于data是HTTP处理程序返回的内容，因此它很可能无法实现Map接口，并且不提供类似get的功能。相反，它将是一个普通的JavaScript对象，您可以像console.log(sql_list['query1'])那样阅读。

您可以使用Object.keys()和set()（存储在Map中的空sql_list对象的某种巧妙组合）“转换”返回的JavaScript对象{{1 }}变成完整的data对象。

Answer 2

执行this.sql_list = data时，您会覆盖之前的sql_list，因此不再是Map<string, string>。由于data是普通的javascript对象，因此sql_list也将是这样。

在很多情况下，您不需要使用Map<string, string>而不是普通对象，因为您可以通过像这样的索引来访问对象值：sql_list['query1']。为了使它在打字稿中成为可能，您必须将sql_list声明为any类型，或创建自己的类型，例如这样的字符串映射器类型：

interface strMap {
  [key: string]: string;
}

然后您只需声明sql_list: strMap;。

如果您仍然有充分理由使用Map<string, string>，则可以查看this question

Answer 3

正如Florian所解释的，您正在将平面JSON对象分配给应为Map的对象如果您确实希望Map可以做的一件事就是做

for (const key in data) {
    this.sql_list.set(key, data[key]);
}

这将遍历您拥有的所有键（“ query1”，“ query2”，“ query3”），然后在地图中设置该键的值

您只是想知道为什么要使用Map，因为如果您已经知道对象的外观以及对象具有的字段，那么为什么不创建一个类并将其键入为该类呢？

只是一个建议。例如，当您使用VS Code编写代码时，也将更加轻松，您将拥有

Typescript无法从JSON数据中读取map <string，string>

3 个答案: