Angular - Как вернуть наблюдаемое из другого наблюдаемого

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

В вашем коде попробуйте что-то вроде этого:

Compoent

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