Rxjs 映射和过滤数组 - 返回单个对象而不是一个数组？答案

【问题标题】：Rxjs map and filter array- Return single object instead of array of one?Rxjs 映射和过滤数组 - 返回单个对象而不是一个数组？
【发布时间】：2019-10-11 07:54:24
【问题描述】：

我的服务上有一个获取所有模板的方法，并返回一个可观察的模板对象数组。我正在尝试向我的服务添加一个新方法，该方法获取模板数组，但对其进行过滤以在数组中按名称获取特定模板。

有没有办法让它只返回一个模板 Observable，而不是一个带有一个项目的 Observable Template 数组？我对 rxjs 语法还很陌生，以至于我不明白如何使用 reduce 之类的东西。

这是我获取所有模板的工作方法。

 getAllTemplates(): Observable<Template[]>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        catchError((error: HttpErrorResponse) => { return throwError(error); })
      );
  }

这是我按名称过滤的尝试，如果有匹配的名称，它将返回一个包含一个元素的数组：

getTemplateByName(name:string):Observable<Template[]>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        map(templates => {
          return templates.filter(template => {
            return template.Name === name;
          })
        }),
       catchError((error: HttpErrorResponse) => { return throwError(error); })
     );

  }

有没有办法通过过滤返回单个 Observable？

【问题讨论】：

一个选项可以在 rxjs 中使用reduce 运算符，接收数组并返回单个对象
我应该把reduce放在哪里？
使用find 而不是filter。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@JenniferS in pipe

标签： javascript arrays angular filter rxjs

【解决方案1】：

当使用map RxJS 运算符时，返回的 observable 具有 map 运算符内部返回的类型。 JavaScript filter 方法返回一个新数组，如its documentation 中所述。这就是为什么您的 getTemplateByName 方法会返回 Template[] 元素的 observable。

如果您需要使 getTemplateByName 方法返回 Template 元素的 observable，则需要在 map 运算符中返回单个 Template 元素。 JavaScript find 方法按照Array.prototype.find() 中的说明执行此操作。只需使用它来实现所需的行为。

getTemplateByName(name:string):Observable<Template>{
    const uri = this.baseService.rootTemplatesUri;
    return this.http.get<Template[]>(uri)
      .pipe(
        map(templates => {
          return templates.find(template => {
            return template.Name === name;
          })
        }),
       catchError((error: HttpErrorResponse) => { return throwError(error); })
     );

  }

【讨论】：