如何解决 Angular 应用程序中的 Observable 不匹配问题？

Question

在我的 Angular 应用程序中，当我尝试编译时出现此错误：

类型 'Observable<Promise<void>>' 不可分配给类型 'Observable<AuthResponseData>'。类型“承诺”缺少 来自“AuthResponseData”类型的以下属性：种类、idToken、 电子邮件、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

这就是为什么我不喜欢混合 Promise 和 observables 的原因之一，尽管它不是一种 hack 或解决方法。

如果你仍然希望将 promise 转换为 observable，你可以使用 RxJS from (RxJS v6.0.0+) 来实现。来自文档：

从一个数组创建一个 Observable，一个类似数组的对象，一个 Promise， 一个可迭代的对象，或者一个类似 Observable 的对象。

如果将then 或catch 方法提供给promise，则from 运算符将返回相应方法返回的promise 的可观察对象，而不是源promise。转换时最好去掉。

试试下面的

服务

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 分配给返回的 Promise。您首先需要使用 Observable.fromPromise 将 promise 转换为 observable。

Answer 3

看来您的login 方法返回Promise not Observable，Promise 没有subscribe 方法。要将其转换为 Observable，您可以使用 from 运算符。有关详细信息，请参阅该问题：Convert Promise to Observable

编辑：

首先将 of 替换为 from 以获得响应的 Observable 而不是 Promise 的 Observable。然后取下捕捉。它应该看起来像这样：

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

  }