修改数组对象的 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 返回 File Array 的 Observable，getFileUri 接受文件名（File 类的属性）并返回 Observable。

我想做的是，结合这两个功能。这意味着， getFiles() 仍应返回 Observable<File[]> 并且数组中的每个 File 都应具有 safeUrl 属性。

我的问题是，我真的不知道怎么做这个复杂的任务。

谢谢！

Answer 1

如果您不介意并行运行所有getFileUris，您可以使用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 => ...);