Как устранить наблюдаемое несоответствие в приложении Angular?

Question

В моем приложении Angular я получаю эту ошибку при попытке скомпилировать:

Тип 'Observable<Promise<void>>' нельзя назначить типу 'Observable<AuthResponseData>'. Типу «Обещание» не хватает следующих свойств из типа «AuthResponseData»: kind, idToken, email, refreshToken и еще 2

Вот интерфейс AuthResponseData:

export interface AuthResponseData {
  kind: string;
  idToken: string;
  email: string;
  refreshToken: string;
  localId: string;
  expiresIn: string;
  registered?: boolean;
}

Вот метод login ():

login() {

    let authObs: Observable<AuthResponseData>;

    authObs = this.authService.login(this.email, this.password);

    authObs.subscribe(
        resData => {
            console.log('Response Data:', resData);
            this.router.navigateByUrl('/home');
        },
        errRes => {
            console.log('Error Response:', errRes);
        });
}

А вот AuthService.login():

login(email: string, password: string) {
    return of(firebase.auth().signInWithEmailAndPassword(email, password)
      .then((user) => {
        console.log('Service User Value', user);
      }).catch((err) => {
        console.log('Service Error', err);
      }));
  }

Может кто-нибудь подсказать, пожалуйста, какие изменения мне нужно внести, чтобы я ' м назначить правильный тип в Observable?

Answer 1

Это одна из причин, почему я не предпочитаю смешивать обещания и наблюдаемые, хотя это не хак или обходной путь.

Если вы все еще хотите sh, чтобы преобразовать обещание в наблюдаемое Вы можете сделать это, используя Rx JS from (Rx JS v6.0.0 +). Из документов:

Создает Observable из массива, объекта массива, Promise, повторяемого объекта или объекта Observable.

If метод then или catch, если он предоставлен обещанию, тогда оператор from вернет наблюдаемое обещание, возвращенное соответствующим методом, вместо исходного обещания. Было бы лучше удалить их при конвертации.

Попробуйте следующее

Сервис

import { from } from 'rxjs';

login(email: string, password: string) {
  return from(firebase.auth().signInWithEmailAndPassword(email, password));
}

Компонент

login() {
  let authObs: Observable<any>;  // <-- use 'any' instead of a specific type
  authObs = this.authService.login(this.email, this.password);
  authObs.subscribe(
    resData => {
      console.log('Response Data:', resData);
      this.router.navigateByUrl('/home');
    },
    errRes => {
      console.log('Error Response:', errRes);
    }
  );
}

Pre Rx JS v6.0.0, пожалуйста, обратитесь здесь .

Answer 2

Кажется, что ваш метод login возвращает Promise, а не Observable, у Promise нет метода subscribe. Для преобразования его в Observable вы можете использовать оператор from. Подробности смотрите в этом вопросе: Преобразовать обещание в наблюдаемое

РЕДАКТИРОВАТЬ:

Сначала замените of на from, чтобы получить наблюдаемый ответ и не наблюдаемый обещание. Затем удалите улов. Это должно выглядеть примерно так:

 // in Component
 authObs = this.loginService('', '');

 authObs.subscribe(
      resData => {
        console.log('Response Data:', resData);

      },
      errRes => {
        console.log('Error Response:', errRes);
      });
  }

  // In service

  public login(email: string, password: string) {
    return from(firebase.auth().signInWithEmailAndPassword(email, password));

  }

Answer 3

Это может решить вашу проблему: Преобразовать обещание в наблюдаемое

return firebase.auth().signInWithEmailAndPassword(email, password)
      .then((user) => {
        console.log('Service User Value', user);
      }).catch((err) => {
        console.log('Service Error', err);
      });

Этот код возвращает обещание. Вы пытаетесь присвоить свой местный Observable возвращенному Обещанию. Сначала нужно преобразовать обещание в наблюдаемое с помощью Observable.fromPromise.