Warm tip: This article is reproduced from serverfault.com, please click

angular-将两个 Observable 对象合并为一个新对象

(angular - Merge two observables into new one)

发布于 2020-11-30 17:12:08

我必须合并2种不同的http请求的结果:

  • 要求1:获取proyects。返回一个Observable<ProjectDTO[]>
  • 请求2:根据项目的数量,我必须进行N次调用(第一个调用列表中的每个项目一个)。返回一个对象ItemsProject

这样我就收到了每个项目的项目计数器。DTO的

ProjectDTO {
  name: string;
  id: number;
}

ItemsProject {
 idProject: number;
 itemsCount: number;
}

在视图中,我只需要显示两件事:project name and items per project

我要做的是以下几点:

    this.vlService.getProjects().pipe(
        mergeMap(projects => {
          this.projects = projects;
          return forkJoin(
            projects.map(project => {
              const projectCount: ItemsProject = {
                idProject: project.idProjects,
                count: 0,
              };
              return this.vlService.getTotalItemsPerProject(projectCount);
            })
          );
        })
      )
      .subscribe(result => {
        console.log('VCOMP | result --> ', result)
      });

它可以工作,但是结果是有一个数组ItemsProjects然后,我应更换ItemProject.idProjectProject.name

结果,我想要一个像这样的项目数组:

ProjectCounter {
 name: string;
 items: number;
}

有没有更好的方法来实现这一目标?提前致谢

Questioner
Aw3same
Viewed
0
chrnx 2020-12-01 01:44:07

你可以尝试将项目本身传递到流中,这样你仍然可以在末尾访问该名称,并且不会破坏你的界面结构。

我还没有测试过,但是类似的东西应该可以工作:

this.vlService.getProjects().pipe(
  mergeMap(projects => from(projects).pipe(
    concatMap(project => forkJoin({
      project: of(project),
      items: this.vlService.getTotalItemsPerProject(projectCount).pipe(first())
    })),
    toArray()
  ))
).subscribe(result => {
  console.log('VCOMP | result --> ', result)
});

这将导致带有project: ProjectDTO的对象数组items: ItemsProject[]