如何解决角度应用程序中的可观测失配问题？

Question

在我的角应用程序中，当我试图编译时，我会得到这个错误：

类型'Observable<Promise<void>>'不能分配给'Observable<AuthResponseData>'类型。类型‘AuthResponseData’中缺少以下属性:类别、idToken、电子邮件、refreshToken和其他两个

下面是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);
      }));
  }

有人能告诉我，我需要做什么改变，这样我才能在可观察范围内指定正确的类型吗？

Answer 1

这就是为什么我不喜欢把承诺和观察混合在一起的原因之一，尽管这不是一个黑客或解决办法。

如果您仍然希望将承诺转换为可观察的承诺，则可以使用RxJS from (RxJS v6.0.0+)来实现。从医生那里：

从一个数组、一个类似数组的对象、一个许诺对象、一个可迭代对象或一个可观察的类对象创建一个可观察的对象。

如果向允诺提供了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 RxJS v6.0.0，请参考here。

Answer 2

这可能解决您的问题：Convert Promise to Observable

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

这段代码返回了一个承诺。你想把你当地的可观察到的地方分配给回报的承诺。首先，您需要将承诺转换为使用Observable.fromPromise可以观察到的承诺。

Answer 3

您的login方法似乎返回了无法观察到的允诺，承诺没有subscribe方法。要将其转换为可观察的，可以使用from运算符。有关详细信息，请参阅该问题：Convert Promise to Observable

编辑：

首先，将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));

  }