Angular Rx Js: запрос каждого элемента в массиве

Question

Один из моих компонентов получает массив элементов. У каждого элемента есть разрешение, которое будет проверяться вызовом отдыха в зависимости от роли пользователя. Если пользователю разрешено использовать этот элемент, он может отображаться.

Итак, я пришел с таким подходом:

ngOnInit(): void {
  for( let tile of this.tiles ) {
    this.permissionCheckService.isUserPermitted( tile.name ).subscribe( 
      isPermitted => tile.show = isPermitted
    )
  }
}

Но это решение вводит новую переменную «show» . Может быть, было бы еще лучше, если бы элементы, которые не должны отображаться, были удалены из массива?

Следующим шагом должна быть реализация индикатора загрузки. Этот индикатор следует убрать, если все запросы выполнены. Но мои проблемы начинаются здесь. Я думаю, мне нужно объединить все наблюдаемые, но я не знаю, как это сделать.

Вот рабочий пример: https://stackblitz.com/edit/angular-wfjj5n-horatl?embed=1&file=src / app / alert-basi c .ts

Answer 1

Скрытие / отображение индикатора загрузки может быть выполнено с помощью одного простого логического флага, для которого установлено значение true / false в начале / завершении потока. Для этого, конечно, вам понадобится один поток, поэтому forkJoin или combineLatest - ваши друзья. Кроме того, вы можете поместить массив результатов в отдельный поток, чтобы сохранить парадигму реактивного / неизменяемого. Что-то вроде

  constructor(private permissionCheckService: PermissionCheckService) {}

  ngOnInit(): void {
    this.isLoading = true;

    this.shownTiles$ = this.checkPermissions().pipe(
      map(this.filterTiles),
      tap(() => (this.isLoading = false))
    );
  }

  checkPermissions = (): Observable<boolean[]> =>
    forkJoin(
      this.tiles.map(tile =>
        this.permissionCheckService.isUserPermitted(tile.name)
      )
    );

  filterTiles = (booleanFlagsArr: boolean[]): any[] =>
    this.tiles.filter((tile, index) => booleanFlagsArr[index] === true);

Вот стекблиц:

https://stackblitz.com/edit/angular-wfjj5n-f7aht4?file=src%2Fapp%2Falert-basic.ts

Answer 2

Yopu может использовать forkJoin для подписки на массив вызовов. Затем отфильтруйте по ответу

forkJoin(
  this.tiles.map(x => this.permissionCheckService.isUserPermitted(x.name))
).subscribe((res: any[]) => {
  //if you want store in an auxiliar variable
  this.tilesValid = this.tiles.filter((x, index) => res[index]);
  //or
  //this.tiles = this.tiles.filter((x, index) => res[index]);
});