Angular Rxjs映射到字符串数组返回未定义

我试图使用rxjs映射从响应中获取字符串数组。 响应是具有

guid

和

name

属性的对象数组

当我得到完整的答复时：

public getAllSolutions(): Observable<string[]> {
  return this.http.get(`${this.baseUrl}/Solution/All`)
    .map((results: Response) => results.json())
}

我明白了：

[
{guid:"6e3d4646e1ad6d78bd225d2bdb5a14709c12e8280796a3b4f27536e8aaaf89ed", name: "Solution 1"},
{guid: "737f838cc457d833ff1dc01980aa56e9661304a26e33885defe995487e3306e7", name: "Solution 2"}
]

我想要的是一个只包含

name

以下文件说明了这一点：

public getAllSolutions(): Observable<string[]> {
  return this.http.get(`${this.baseUrl}/Solution/All`)
    .map((results: Response) => results.json())
    .map(solutions => solutions.name);
}

publicGetAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.map（（results:Response）=>results.json（））
.map（solutions=>solutions.name）；
}

---

但是我得到的输出是未定义的。我在这里做错了什么？

让我给你一个完全正确的例子，因为你的返回值甚至没有为你给出的值正确定义，即使它是你所期望的。以下是您的代码的更正版本：

/*这是API中的响应示例（根据您的注释），该API是在Observable mapper中运行response.json（）函数时生成的：
*
* [
*{guid:“6e3d4646e1ad6d78bd225d2bdb5a14709c12e8280796a3b4f27536e8aaaf89ed”，名称：“解决方案1”}，
*{guid:“737f838cc457d833ff1dc01980aa56e9661304a26e33885defe995487e3306e7”，名称：“解决方案2”}
* ]
*/
//在类之外定义此接口，以便更容易在代码中进行推理，而不管您选择下面的函数。如果愿意，您甚至可以将此接口放入另一个文件中。
接口解决方案{
guid:字符串；
名称：字符串；
}
//假设RxJS（v4）和@angular HttpModule（v2-4），这应该是函数：
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.map（（results:Response）=>results.json（））
.map（（solutions:solutions[]）=>solutions.map（（solution:solution）=>solution.name））；
}
//假设RxJS（v5）和@angular HttpClientModule（当前为v5+），这应该是函数：
//您需要从RxJS导入map函数，否则您将得到各种愚蠢的错误，这些错误实际上不会告诉您需要包含此函数。此导入也区分大小写。快乐时光。
包括来自“rxjs/operators”的{map}；
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.烟斗(
map（（response:Solution[]）=>response.map（（Solution:Solution）=>Solution.name））
);
}

[
{guid:“6e3d4646e1ad6d78bd225d2bdb5a14709c12e8280796a3b4f27536e8aaaf89ed”，名称：“解决方案1”}，
{guid:“737f838cc457d833ff1dc01980aa56e9661304a26e33885defe995487e3306e7”，名称：“解决方案2”}
]
我想要的是一个只包含名称的数组
以下文件说明了这一点：
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.map（（results:Response）=>results.json（））
.map（solutions=>solutions.name）；
}

让我给你一个完全正确的例子，因为你的返回值甚至没有为你给出的值正确定义，即使它是你所期望的。以下是您的代码的更正版本：

/*这是API中的响应示例（根据您的注释），该API是在Observable mapper中运行response.json（）函数时生成的：
*
* [
*{guid:“6e3d4646e1ad6d78bd225d2bdb5a14709c12e8280796a3b4f27536e8aaaf89ed”，名称：“解决方案1”}，
*{guid:“737f838cc457d833ff1dc01980aa56e9661304a26e33885defe995487e3306e7”，名称：“解决方案2”}
* ]
*/
//在类之外定义此接口，以便更容易在代码中进行推理，而不管您选择下面的函数。如果愿意，您甚至可以将此接口放入另一个文件中。
接口解决方案{
guid:字符串；
名称：字符串；
}
//假设RxJS（v4）和@angular HttpModule（v2-4），这应该是函数：
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.map（（results:Response）=>results.json（））
.map（（solutions:solutions[]）=>solutions.map（（solution:solution）=>solution.name））；
}
//假设RxJS（v5）和@angular HttpClientModule（当前为v5+），这应该是函数：
//您需要从RxJS导入map函数，否则您将得到各种愚蠢的错误，这些错误实际上不会告诉您需要包含此函数。此导入也区分大小写。快乐时光。
包括来自“rxjs/operators”的{map}；
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.烟斗(
map（（response:Solution[]）=>response.map（（Solution:Solution）=>Solution.name））
);
}

[
{guid:“6e3d4646e1ad6d78bd225d2bdb5a14709c12e8280796a3b4f27536e8aaaf89ed”，名称：“解决方案1”}，
{guid:“737f838cc457d833ff1dc01980aa56e9661304a26e33885defe995487e3306e7”，名称：“解决方案2”}
]
我想要的是一个只包含名称的数组
以下文件说明了这一点：
public getAllSolutions（）：可观察{
返回this.http.get（`${this.baseUrl}/Solution/All`）
.map（（results:Response）=>results.json（））
.map（solutions=>solutions.name）；
}

您应该在结果数组上应用“map:

.map（solutions=>solutions.map（s=>s.name））@AlekseyL。这是正确的，谢谢！我还是不知道第一张地图适用于什么？这第一个映射不是已经应用到结果数组了吗，因为那里没有其他映射？或者.json（）结果是一个包含数组的对象吗？是的，
results.json（）。因此，您可以在适当的位置应用
Array.map
，而不是在observable:
.map（（results:Response）=>results.json（）.map（s=>s.name））
上的第二个map中这样做。我认为了解
Array.map
和
Observable.map
之间的区别会有所帮助。您应该在结果数组上应用“map:
.map（solutions=>solutions.map（s=>s.name
public getAllSolutions(): Observable<string[]> {
  return this.http.get(`${this.baseUrl}/Solution/All`)
    .map((results: Response) => results.json())
    .map(solutions => solutions.name);
}