时间戳

首页 > 解决方案 > RxJs：具有内部可观察的过滤器数组

angular - RxJs：具有内部可观察的过滤器数组

问题描述

我有一系列路线，我试图根据服务是否说用户有权限来过滤这些路线。我尝试了各种组合和变革运营商，但都没有成功mergeMap, concatMap, concatAll, mergeAll。问题是hasRoutePermission返回一个从端点返回布尔值的可观察对象。提前致谢。

堆栈闪电战

const exampleRoutes = [{
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}];

filterRoutes(routes): Observable <[]> {
  const hasRoutePermission = (route: IRouteData): Observable <boolean> =>
    this.examplePermissionService.hasRoutePermission(route);

  return of(items)
  .pipe(
    filter(item => hasRoutePermission(item))// Problem is here
  )
}

我正在使用异步管道订阅模板中的过滤列表。

标签： angularrxjs

解决方案

因此，您在 Observable 中接收布尔值，现在需要使用“扁平化”运算符之一（如mergeMap、concatMap等）来取回原始值：

const { of, from } = rxjs; // = require("rxjs")
const { mergeMap, filter, map, toArray } = rxjs.operators; // = require("rxjs/operators")

function hasRoutePermission(id) {
  return of(id % 2 === 0); // mock api logic
}

function filterRoutes(items) {
  return from(items).pipe(
    mergeMap(item =>
      hasRoutePermission(item).pipe(
        filter(permission => permission),
        map(() => item)
      )
    ),
    toArray()
  );
}

const filtered$ = filterRoutes([0,1,2,3,4,5]);
filtered$.subscribe(v => console.log(v));
<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js"></script>

推荐阅读