问题是:类型“ Observable <user>”上不存在属性“ switchMap”

时间:2019-03-17 05:41:12

标签: angular rxjs observable rxjs6 switchmap

尝试在git bash中运行时遇到此问题。 .switchMap无法执行,并显示错误为“错误TS2339:类型'Observable'不存在属性'switchMap'“

我使用的代码是:

import { User } from './../classes/user';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { from } from 'rxjs';
@Injectable()
export class AuthService {

  public currentUser: Observable<User | null>;

  constructor(
    private router: Router,
    private alertService: AlertService,
    private afAuth: AngularFireAuth,
    private db: AngularFirestore
  ) {

    this.currentUser = this.afAuth.authState
      .switchMap((user) => {
        if (user) {
          return this.db.doc<User>(`users/${user.uid}`).valueChanges();
        } else {
          return of(null);
        }
      });
  }

我的rxjs版本最新为rxjs@6.3.3,而nodejs版本为v8.12.0 请帮助我建立一个聊天网站。

2 个答案:

答案 0 :(得分:1)

您的问题是,在RxJs 6中,switchMap(以及许多其他运算符)不再存在于Observable上。相反,您必须使用.pipe()运算符通过管道传递可观察对象,该运算符采用任何数量的方法并将其应用于可观察对象。然后,您导入switchMap函数以在管道中使用它。.

import { switchMap } from 'rxjs/operators';

....

this.currentUser = this.afAuth.authState.pipe(
  switchMap((user) => {
    if (user) {
      return this.db.doc<User>(`users/${user.uid}`).valueChanges();
    } else {
      return of(null);
    })
);

如果您习惯了旧的(RxJs 5)行为,并且想以这种方式工作,则有一个名为rxjs-compat的软件包(与npm install rxjs-compat一起安装),该软件包允许您使用RxJs使用旧语法的6岁以上。

但是,由于使用了新的语法,因此可以显着提高性能和捆绑软件的大小,因为它支持Tree Shaking,所以我不推荐这样做。

答案 1 :(得分:0)

我知道这是一个很晚的回复,但是我遇到了类似的错误。对我来说,甚至@Daniel的答案都没有用。我必须在单独的语句中使用管道:

...
this.currentUser = this.afAuth.authState;
this.currentUser.pipe(switchMap(user => {
    if (user) {
      // logged in, get custom user from Firestore
      return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
    } else {
      // logged out, null
      return of(null)
    }
}))

此外,我在导入switchmapofObservable时遇到了一些麻烦,但是设法通过以下方式导入了所有内容:

import { Observable } from 'rxjs';
import { of } from 'rxjs';
import {switchMap} from 'rxjs/operators';

该代码在

下运行良好
  • Angular CLI:7.3.8
  • 节点10.15.3
  • 角度7.2.14
  • rxjs:6.5.1