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>会导致行为空：

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)。

谢谢！

更新：忘记了界面：）

interface UnifiedParam { 名称：字符串，资料来源：字串 };

更新2：为弄清我的困惑：为什么需要外部map（）函数。不是为数组定义map（）吗？

Answer 1

我不太确定是否了解您的问题/需求。

如果您的后端api返回UnifiedParam模型的数组，则返回UnifiedParam[]，并且您需要检索一个名称数组，例如string[]，并且模型的样子如下：< / p>

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函数：

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

因此，换句话说：

调用Get Http请求以检索UnifiedParam的列表。
服务器回复时，接收仅包含一个值（UnifiedParam数组）的流（可观察到），然后该流将自行完成。
对于流中的每个值（也是唯一的一个值），我们将其（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>，我不知道这是否适合您

转换没有嵌套map（）的http响应

2 个答案: