Observables 数组请求一个字符串？答案

【问题标题】：Array of Observables request a string?Observables 数组请求一个字符串？
【发布时间】：2019-05-17 09:21:18
【问题描述】：

您好，我仍在尝试使用 RxJS，我正在尝试为数组中的每个 Observables 检索此 Observable 的链接图像，如下所示：

我有我的 Observable Assignment 数组
Foreach 分配获取其“徽标”属性（它是图像的 Id）& 如果它有一个将其图像检索为字符串 (dataUrl)
以数组的形式返回所有带有其 Image 属性的分配

到目前为止，我已经做到了：

public collectAssignements(): Observable<Observable<AssignementEntity>> {
    return this.assignementService.get('').pipe(
      map((assignments: AssignementEntity[]) => from(assignments.map((assignment) => new AssignementEntity(assignment))))
    );
  }

public assignements(): Observable<AssignementEntity[]> {
    return this.collectAssignements().pipe(
      mergeMap((assignment: Observable<AssignementEntity>) => {
        return assignment;
      }),
      map((assignment: AssignementEntity) => {
        return assignment;
      }),
      // here I'd like to use my function getPhoto on assignment.Platform.Logo if there is one (Logo is an Id)
      // then set the retreived string (dataUrl) to assignment.Platform.Image
      // but I can't figure out how to do that?
      toArray()
    )
  }

要从我的作业中获取我的图片，我必须将照片 ID（此处为 assignment.Platform.Logo）传递给getPhoto，此处返回一个 Observable 字符串：

public fileReader(blob: Blob): Observable<string> { // @todo inclure le FileReaderService readAsDataURL
    return Observable.create((obs: Observer<string | ArrayBuffer>) => {
      const reader = new FileReader();

      reader.onerror = err => obs.error(err);
      reader.onabort = err => obs.error(err);
      reader.onload = () => obs.next(reader.result);
      reader.onloadend = () => obs.complete();

      return reader.readAsDataURL(blob);
    });
  }


  public getPhoto(id: string, size: string = "min"): Observable<string> {
    return this.httpClient.get(`${this.environment.get('webServiceUrl')}/photos/${id}/${this.endpoint.slice(0, -1)}/${size}`, { responseType: "blob" as "json" }).pipe(
      mergeMap((blob: Blob) => this.fileReader(blob))
    );
  }

assignmentService 的 get 返回一个 Observable<Assignment[]> 并且 AssignmentEntity 有一个 Platform（实体）和一个 Logo 属性（它是一个带有字符串的 Id）。此外，Platform 实体的Image 属性（字符串）默认为空，等待填充dataUrl。

【问题讨论】：

assignmentService 实现和AssignmentEntity 定义会很有用。
assignmentService 的获取返回一个Observable<Assignment[]> 和AssignmentEntity 有一个Platform（实体）和一个Logo 属性（它是一个带有字符串的Id）。此外，Platform 实体有一个 Image 属性（字符串）默认为空，等待用 dataUrl 填充。希望对您有所帮助！
解释很好，代码会更好。

标签： angular rxjs observable

【解决方案1】：

在阅读了 RxJS 文档之后，我想出了这个解决方案：

public assignements(): Observable<AssignementEntity[]> {
    return this.assignementService.get('').pipe(
      map((assignments: AssignementEntity[]) => from(assignments.map((assignment) => new AssignementEntity(assignment)))),
      mergeMap((assignment: Observable<AssignementEntity>) => {
        return assignment;
      }),
      map((assignment: AssignementEntity) => {
        return assignment;
      }),
      mergeMap((assignment: AssignementEntity) => { // forEach assignment if it has a Logo then make a request to get the image
        return assignment.Platform.Logo !== null ? this.platformService.getPhoto(assignment.PlatformId).pipe(
          map((image: string) => {
            assignment.Platform.Image = image;
            return assignment;
          })
        ) : of(assignment); // return the base assignment if no logo
      }),
      toArray(), // convert to an array
    );
  }

【讨论】：