Угловой 8 - вызов наблюдаемых последовательно

Question

Я пытаюсь вызвать несколько наблюдаемых один за другим. Вот мой код:

 // service1    
 login(username: string, password: string): any {
  this.service2.firstObservable(username, password)
    .pipe(map(
      data => {
          if (data) {
            return this.service2.secondObservable(data, username, password)
            .subscribe(token => {
              return true;
            });
          }
      },
      error => {
          this.service.error(error);
          return false;
      }
    ));
}

Выполнение:

this.service1.login(this.f.username.value, this.f.password.value)
    .pipe(map(
      data => {
          // Login is successful 
      }
    ));

Я получаю:

Cannot read property 'pipe' of undefined

Очевидно, что service1.login возвращает неправильное значение. Можно ли как-то заставить это работать?

Спасибо

Обновление 1.

login(username: string, password: string): any {
  return this.service1.firstObservable(username, password)
    .pipe(switchMap(
      data => this.service1.secondObservable(data, username, password)
    ));
}

Answer 1

Вы можете попробовать switchMap для переключения наблюдаемых, и не забудьте вернуть значение в service1:

login(username: string, password: string): any {
  return this.service2.firstObservable(username, password)
    .pipe(
      switchMap(
        data => this.service2.secondObservable(data, username, password)
      ),
      catchError(
        error => {
          this.service.error(error);
          return throw(error); // In case you want to catch it later
        }
      )
    );
} 

После этого второй фрагмент кода должен работать.

Answer 2

вы можете использовать await, но тогда метод должен быть void и asnyc

    async login(username: string, password: string) {
        let data = await this.service2.firstObservable(username, password).toPromise();
        if(data){
            let data2: boolean = await this.service2.secondObservable(data, username, password).toPromise();
        }
    }

Answer 3

Вы можете использовать flatMap для объединения последовательных запросов:

 login(username: string, password: string): Observable<boolean> {
  this.service2.firstObservable(username, password)
    .pipe(flatMap(
      (data) => {
          if (data) {
            return this.service2.secondObservable(data, username, password).pipe(flatMap((token) => {return true;}))
          }
      },
      error => {
          this.service.error(error);
          return false;
      }
    ));
}