角度-如何从另一个可观察对象返回一个可观察对象

Question

我有一个组件订阅服务中的一个可观察对象。该方法反过来订阅另一个服务中的可观察对象。我想将一个数组从最后一个服务传递回第一个服务，然后第一个服务将该数组传递回组件。更具体地说，该组件调用其本地服务，然后调用一个数据服务，该数据服务通过http客户端访问我的数据库。http客户端正在工作，数据服务将数组返回给本地服务。本地服务接收数组，但我不知道如何将该数组作为可观察对象传递回组件。以下是简短的代码块：

组成部分：

this.soccerService.getPlayers(0).subscribe(
  teamPlayers => {
    this.teamPlayers = teamPlayers;
    this.currentTeam = teamPlayers.team;
    this.players = teamPlayers.players;
    this.teamColor = this.currentTeam.color;
  }

足球服务

this.dataService.getPlayers(teamId).subscribe( players => { 
            this.players = players;
            this.teamPlayers.team = this.team;
            this.teamPlayers.players = this.players;

            this.teamPlayers = {
                team: this.team,
                players: players
            };
            return of(this.teamPlayers);
        });  

数据服务

getPlayers(id): Observable<Player[]> {
debugger;
return this.http.get<Player[]>(apiRootCustom + '/GetPlayers/' + id, httpOptions);

}

Answer 1

您正在足球服务中使用subscribe。您要做的是从您的数据服务传回可观测数据，并让您的足球服务在继续将其传回组件之前稍微增强响应。

将subscribe视为您的可观察对象的“终点”，但您可以将可观察对象传递给任意数量的订阅者，并随时使用管道对响应执行不同的操作。

使用不同运算符更改不同订阅者的可观测响应的示例：StackBlitz

在代码中尝试这样的操作：

成分

this.soccerService
  .getPlayers(0)
  .subscribe(
    (teamPlayers) => {
      this.teamPlayers = teamPlayers;
      this.currentTeam = teamPlayers.team;
      this.players = teamPlayers.players;
      this.teamColor = this.currentTeam.color;
    },
    (error: any) => {
      // TODO: handle any errors
    }
  );

足球服务

this.dataService
  .getPlayers(teamId)
  .pipe(
    map((players) => {
      this.players = players;
      this.teamPlayers.team = this.team;
      this.teamPlayers.players = this.players;

      this.teamPlayers = {
        team: this.team,
        players: players
      };

      return this.teamPlayers;
    })
  );

数据服务

  getPlayers(id): Observable<Player[]> {
    return this.http.get<Player[]>(`apiRootCustom/GetPlayers/${id}`, httpOptions);
  }