在没有嵌套 map() 的情况下转换 http 响应

Question

我认为我在这里遗漏了一些东西，因为我发现将 Angular http.get 与来自 RXJS 的 pipe(map) 一起使用非常不直观：

后端返回一个简单对象数组（参见下面的Unifiedparams接口）。我想提取一个Observable<String[]> 并将其传递给app.component.html，在此我使用*ngFor="let param of params$ | async" 构建一个下拉列表。

虽然返回的 json 是一维数组，但我似乎无法在没有嵌套映射的情况下访问 name 属性。

fetchParams(): Observable<String[]>{
    const result = this.http.get<unifiedParam[]>('http://localhost:5000/getparams');
    const params:Observable<String[]> = result.pipe(map(unifiedParams => res.map(unifiedParam=>unifiedParam.name)));
    return params;
}

这似乎表明 Observable 本身就是一个数组，但分别使用 this.http.get<unifiedParam> 和 rows:Observable<String> 会导致 rows 为空：

fetchParams(): Observable<String>{
    const result = this.http.get<unifiedParam>('http://localhost:5000/getparams');
    const params:Observable<String> = result.pipe(map(unifiedParam=> unifiedParam.name)));
    params.pipe(tap(console.log)); //doesn't print anything
    return params;   
}

所以我的问题是，如果使用Observable<UnifiedParam[]> 和.pipe(map(res=>map(el=>el.name) 是要走的路。

谢谢！

更新：忘记界面了:)

接口统一参数 { 名称：字符串， 来源：字符串 };

更新 2：澄清令我困惑的地方： 为什么我需要外部 map() 函数。 map() 不是为数组定义的吗？

Answer 1

我不确定是否完全理解您的问题/需求。

如果您的后端 api 返回一个 UnifiedParam 模型数组，那么 UnifiedParam[]，并且您需要检索一个名称数组，那么 string[]，如果您的模型看起来像：

UnifiedParam {
  ...
  name: string
  ...
}

所以你的第一种方法很好。

只需对您的代码进行一点重构：

fetchParams(): Observable<String[]> {
  return this.http.get<UnifiedParam[]>('http://localhost:5000/getparams').pipe(
    map(unifiedParams => unifiedParams.map(unifiedParam => unifiedParam.name)) 
  )
}

我的建议也是正确键入您的模型，并使用全面的变量/参数名称。 （例如，在map 运算符内部：unifiedParams...）。

这将有助于保持代码清晰和可维护。

更新

在您的代码中，有 2 个map 函数：

• 一个是数组映射函数，用于迭代数组的每一项，并通过返回它的“投影”或任何其他新对象来对其进行转换。
• 第二个，是Observable 运算符，这意味着：对于流中发出的每个值，将其转换为另一个值。

所以在这里，换句话说：

• 调用 Get Http 请求以检索 UnifiedParam 的列表。
• 当服务器回复时，接收一个只有一个值（UnifiedParam 数组）的流（Observable），然后这个流将自行完成。
• 对于流中的每个值（因此只有一个），我们将其（UnifiedParam 的数组）转换为新的名称数组。

希望这次更新更清楚。

Answer 2

您可以将array 转换为Observable 并对其进行平面映射，然后仅使用一个地图运算符（这次来自Observable）：

fetchParams(): Observable<String> {
  return this.http.get<UnifiedParam[]>('http://localhost:5000/getparams')
             .pipe(
                 mergeMap(unifiedParams => from(unifiedParams)),
                 map(unifiedParam => unifiedParam.name) 
              )
}

请注意，您不会收到Observable<String[]>，而是直接收到Observable<String>，我不知道这是否适合您