属性 'map' 在类型 'OperatorFunction<Action, never>' 上不存在 'OperatorFunction<Action, never>'.ts(2339)

Question

我是 ngrx 的新手，遵循的不是那么旧的教程，但似乎使用了 "map"、"ofType"、"of" 和 "pipe" 的方式，有改变了，所以 "map" 和 "of" 抛出错误

"map" 错误：属性 'map' 在类型 'OperatorFunction'.ts(2339)

上不存在

和

"of" error:// 属性 'of' 在类型 'typeof Observable'.ts(2339)

上不存在

这是操作：

export class GetUser implements Action {
     readonly type = GET_USER;
     constructor(public payload?: any) { }
}

效果如下：

@Effect()
 getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
      **.map**((action: userActions.GetUser) => action.payload)
      .switchMap(payload => this.afAuth.authState)
      .delay(2000)
      .map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      }).catch(err => Observable.**of**(new userActions.AuthError()));

Answer 1

这似乎是在使用旧版本的 RxJS。从版本 6（我相信）开始，应该使用可管道运算符。这些是从 'rxjs/operators' 导入的，例如import { map } from 'rxjs/operators';

@Effect()
 getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
      ,map((action: userActions.GetUser) => action.payload)
      ,switchMap(payload => this.afAuth.authState)
      ,delay(2000)
      ,map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      });

查看文档 https://rxjs-dev.firebaseapp.com/guide/operators

Answer 2

是的，他们在 RxJS v6 中发生了变化，我想是的。现在，其中许多被视为 "pipeable" 运算符，这意味着它们作为参数传递给 pipe 方法，而不是像您在此处所做的那样进行链接。您的代码应该更像：

@Effect()
 getUser: Observable<Action> = this.actions.pipe(
     ofType(userActions.GET_USER),
     map((action: userActions.GetUser) => action.payload),
     switchMap(payload => this.afAuth.authState),
     debounceTime(2000),
     map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      }),
      catch(err => of(new userActions.AuthError())
    )
 );

我不确定为什么会有延迟，但听起来您想在继续之前暂停 2000 毫秒，所以我用 debounceTime 替换了该方法。

此外，如果您使用的是 VS Code，请获取最新的 Angular Essentials 扩展，它将帮助您进行导入。

map 和 switchMap 等方法将从 rxjs/operators 导入，而 of 等创建方法将从 rxjs

导入

属性 'map' 在类型 'OperatorFunction<Action, never>' 上不存在 'OperatorFunction<Action, never>'.ts(2339)

Property 'map' does not exist on type 'OperatorFunction<Action, never>'.ts(2339)

firebase

ionic-framework

ngrx

angular