时间戳

首页 > 解决方案 > Angular 9 管道变换数组使用过滤器和返回可观察的过滤器函数

angular - Angular 9 管道变换数组使用过滤器和返回可观察的过滤器函数

问题描述

我尝试寻找一种使用返回可观察布尔值的函数来过滤数组的方法。

我需要的是一个根据用户权限过滤值的管道，并且鉴于权限是可观察的，我不能假设它们在页面加载时存在。

我希望这发生在管道中，因为这可能会在以后重用。

所以以一种天真的方式，我想做的是：

调用使用

 *ngFor="let value of values | selector"

管道：

... ...
@Pipe({
  name: 'selector',
  pure: false
})
... ...
transform(value: { value, viewValue, permission: AuthGroup }[]): Observable<any[]> {
    return value.filter(o => this.authorizationService.hasPermission(o.permission).subscribe(s => s));   
  }

哪里this.authorizationService.hasPermission返回一个Observable<boolean>

但是，如果可能的话，我还没有找到任何细节。

我意识到那里是不好的.subscribe，这只是为了表明我的意图。

我尝试了很多不同的东西，但我认为要么是不可能的，要么我只是不熟悉 RXJS 的语法以使其正常工作。

编辑：如果其他人遇到此问题并使用 Kurts 答案，您将不得不| async像这样添加管道：

 *ngFor="let value of values | selector | async"

因为管道返回一个 oberservable，所以我没有包含在原始问题中，因为我希望我完全天真的想法成为问题。

标签： angularfilterrxjspipeobservable

解决方案

你想要：

  • 获取Observable<boolean>一些未知数量的输入值
  • 根据可观察值响应过滤输入值

我会：

  1. 将 observables 设置为一个数组
  2. 并行运行它们forkJoin
  3. 用于map根据返回的布尔值过滤输入数组
@Pipe({
  name: 'selector',
  pure: false
})
transform(value: { value, viewValue, permission: AuthGroup }[]): Observable<any[]> {
  // 1. set up the observables
  const permissionObservables: Observable<boolean>[] = value
    .map(o => this.authorizationService.hasPermission(o.permission));

  // 2. run in parallel
  return forkJoin(permissionObservables).pipe(

    // 3. return value filtered by results of observables
    map((permissions: boolean[]) => value.filter((x, i) => permissions[i] === true))
  );
}

推荐阅读