Изменение содержимого Observable объектов массива

Question

В моем сервисе есть следующие функции:

   getFiles(): Observable<File[]> {
    const makeFiles = map((response: FileResponse[]): File[] => {
      return response.map((fileResponse: FileResponse): File => {
        return File.fromResponse(fileResponse);
      });
    });

    return this.httpService.get('/profile/files').pipe(
      makeFiles,
      shareReplay(),
    );
  }

  getFileUri(filename: string): Observable<SafeUrl> {
    return this.httpService.get(`/profile/file/uri/${filename}`).pipe(
      mergeMap((uri: string) => this.httpService.get(uri, {}, { useUrlAsItIs: true, responseType: 'arraybuffer' })),
      map((fileBuffer: any) => {
        const unsafeUrl = URL.createObjectURL(new Blob([fileBuffer], {type: 'application/binary'}));
        const safeUrl = this.sanitizer.bypassSecurityTrustUrl(unsafeUrl);

        return safeUrl;
      })
    );
  }

Как вы можете видеть, getFiles возвращает Observable из File Array, а getFileUri принимает имя файла (свойство класса File) и возвращает Observable.

Я хочу объединить эти две функции. Это означает, что getFiles () по-прежнему должен возвращать Observable<File[]>, и каждый файл в массиве должен иметь свойство safeUrl.

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

Спасибо!

Answer 1

Если вы не против запустить все getFileUri параллельно, вы можете использовать forkJoin, чтобы собрать все ответы и затем обновить исходные File объекты.

import { forkJoin } from 'rxjs';

getFiles().pipe(
  mergeMap(files => {
    const observables = files.map(file => this.getFileUri(file.filename));

    return forkJoin(...observables).pipe(
      map((urls: SafeUrl[]) => {
        urls.forEach((url, index) => files[index].safeUrl = url);
        return files;
      }),
    );
  ),
}).subscribe(files => ...);