Question

嗨，我仍在尝试RxJS，我正在尝试数组中的每个Observable来检索该Observable的链接图像，如下所示：

我有一组可观察的作业
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中，这里返回一个可观察的字符串：

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返回一个Observable<Assignment[]>，而AssignmentEntity具有一个Platform属性的Logo（实体）（它是一个带有字符串的ID ）。此外，Platform实体的Image属性（字符串）默认为空，等待填充dataUrl。

Answer 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
    );
  }

Observables数组请求一个字符串？

1 个答案: