RxJs 如何映射 Observable<Array> 中的项目答案

【问题标题】：RxJs how to map the items in an Observable<Array>RxJs 如何映射 Observable<Array> 中的项目
【发布时间】：2019-04-07 07:16:30
【问题描述】：

我创建了一些简化的代码来说明我的问题。

我的 observable 发出一个数组。我正在尝试映射数组中的项目，但我不得不在 RxJS 映射运算符中使用Array.map 来实现这一点。我正在寻找一种更 RxJs 的方式来实现不使用 Array.map 的相同事物。这是stackblitz，这是基本代码。谢谢。

this.myObservable$ = of(json).pipe(
  map((data: any[]) => {
    return data.map((navigation: any) => {
      return <INavigation> {
        Id: navigation.Id,
        AppId: navigation.NavAppId,
        NavId: navigation.NavId,
        Name: navigation.NavName,
        ParentId: navigation.NavParentId,
        PageURL: navigation.NavPageURL,
        Position: navigation.NavPosition,
        Active: navigation.NavActive,
        Desktop: navigation.NavDesktop,
        Tablet: navigation.NavTablet,
        Phone: navigation.NavPhone,
        RoleId: navigation.NavRoleId,
        Target: navigation.NavTarget
      }
    })
  })
)

【问题讨论】：

标签： angular rxjs

【解决方案1】：

如果您不想使用 Array 的 map 方法而只使用 RxJS 运算符，那么您可以利用 mergeMap 需要一个返回 ObservableInput 的函数作为参数的事实，并且 Array 是一个ObservableInput。

在这种情况下，mergeMap 所做的是展平 Array 并发出其单个项目（mergeMap 也称为flatMap）。

最后，由于您需要this.myObservable$ 发出一个数组，您可以使用运算符toArray。

代码如下所示

this.myObservable$ = of(json).pipe(
      mergeMap(data => data),
      map((navigation) => {
        return <INavigation> {
          Id: navigation.Id,
          AppId: navigation.NavAppId,
          NavId: navigation.NavId,
          Name: navigation.NavName,
          ParentId: navigation.NavParentId,
          PageURL: navigation.NavPageURL,
          Position: navigation.NavPosition,
          Active: navigation.NavActive,
          Desktop: navigation.NavDesktop,
          Tablet: navigation.NavTablet,
          Phone: navigation.NavPhone,
          RoleId: navigation.NavRoleId,
          Target: navigation.NavTarget
        }
      }),
      toArray()
    )

老实说，您使用 Array map 方法的原始解决方案看起来更简单、更精简。

【讨论】：

谢谢，很高兴看到只有 RxJS 的解决方案，如果没有更好的解决方案，我会接受 - 我知道也许我的原始解决方案更自然，但这是我想要的答案，以防万一一种自然的 RxJS'y 方式 - 非常感谢
如果你在这些语句之间添加tap 操作符，你会看到数组被完全转换为一个Observable，然后再次转换回一个数组。如果您有一个大型阵列，这可能会影响性能。原来的 array 映射运算符似乎更有效。

【解决方案2】：

RxJS 内部仅使用 Javascript 函数，每个运算符都是一个 javascript 函数，您可以使用 JS 函数创建自定义 RxJS 运算符。假设您正在使用 map 运算符，它将接收 observable 作为输入，执行转换并返回一个可观察的。

您可以使用 Javascript 地图运算符，这是一个很好的。没有看到任何特定于 forEach 的 Rxjs 运算符。

【讨论】：