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

Question

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

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

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

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

调用使用

 *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，所以我没有包含在原始问题中，因为我希望我完全天真的想法成为问题。

Answer 1

你想：

• 为一些未知数量的输入值获取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))
  );
}