Angular 9 массив преобразования трубы с использованием фильтра с функцией фильтра, которая возвращает наблюдаемую - PullRequest
0 голосов
/ 11 марта 2020

Я попытался найти способ фильтрации массива с помощью функции, которая возвращает наблюдаемое логическое значение.

Мне нужен канал, который фильтрует значения на основе разрешений пользователей и учитывая тот факт, что разрешения Я не могу предположить, что они присутствуют при загрузке страницы.

Я хочу, чтобы это происходило в трубе, потому что это может быть использовано позже.

Итак, наивным способом я хочу сделать следующее:

Вызывается с помощью

 *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 там, это просто для обозначения моего намерения.

Я пробовал много разных вещей, но я думаю, что либо это не так возможно, или я просто не знаком с синтаксисом RX JS, чтобы он работал правильно.

Редактировать: Если другие сталкиваются с этим и используют ответ Курта, вам нужно было бы добавить | async трубу следующим образом:

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

, потому что труба возвращает наблюдаемую, я не сделал не включайте в первоначальный вопрос, потому что я хотел, чтобы вопрос был полностью наивным.

1 Ответ

1 голос
/ 11 марта 2020

Вы хотите:

  • получить Observable<boolean> для некоторого неизвестного числа входных значений
  • отфильтровать входные значения на основе откликов наблюдаемых значений

Я бы:

  1. Установите наблюдаемые как один массив
  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))
  );
}
...