Angular rxjs Observable.timer 不是带导入的函数 [英] Angular rxjs Observable.timer is not a function with import

问题描述

在我的角度应用程序中，我收到以下错误:

In my angular application I recieve the following error:

错误类型错误:rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.timer 不是功能在 SwitchMapSubscriber.project (hybrid.effect.ts:20)在 SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next(switchMap.js:34)在 SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(订阅者.js:54)在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next(filter.js:38)在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next(订阅者.js:54)在 ScannedActionsSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next(主题.js:47)在 SafeSubscriber._next (store.js:332)在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195)在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next(订阅者.js:133)在 Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next(Subscriber.js:77)

ERROR TypeError: rxjs_Observable__WEBPACK_IMPORTED_MODULE_4__.Observable.timer is not a function at SwitchMapSubscriber.project (hybrid.effect.ts:20) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:34) at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at ScannedActionsSubject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47) at SafeSubscriber._next (store.js:332) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:195) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)

我的代码如下所示:

import { Injectable } from '@angular/core';
import { Effect, Actions } from '@ngrx/effects';
import { of } from 'rxjs/observable/of';
import { map, catchError, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/timer';

import * as hybridActions from '../actions/hybrid.action';
import { FleetStatusReportService } from '../../fleet-status-report.service';

@Injectable()
export class HybridEffects {
  constructor(
    private actions$: Actions,
    private fleetstatusreportService: FleetStatusReportService
  ) {}

  @Effect()
  loadHybrid$ = this.actions$.ofType(hybridActions.LOAD_HYBRID).pipe(
    switchMap(() => Observable.timer(0, 900000)),
    switchMap(() => {
      return this.fleetstatusreportService.getHybridPerformance().pipe(
        map(hybrid => new hybridActions.LoadHybridSuccess(hybrid)),
        catchError(error => of(new hybridActions.LoadHybridFail(error)))
      );
    })
  );
}

我一直在网上环顾四周，在我看来，最新的 angular 版本会使用

I've been looking around on the web and to me it looks like that the latest angular version would use

import 'rxjs/add/observable/timer';

然而，它似乎不起作用.有谁知道如何解决这个问题?

however, it doesn't seem to work. Does anyone know how to solve this problem?

推荐答案

如果你在 RxJS 6 中使用最新的 angular，那么你需要这样做:

If you use latest angular with RxJS 6, then you need to do it like this:

import { map, catchError, switchMap } from 'rxjs/operators';
import { Observable, of, timer } from 'rxjs';

loadHybrid$ = this.actions$.ofType(hybridActions.LOAD_HYBRID).pipe(
  switchMap(() => timer(0, 900000)),
  switchMap(() => {
    return this.fleetstatusreportService.getHybridPerformance().pipe(
      map(hybrid => new hybridActions.LoadHybridSuccess(hybrid)),
      catchError(error => of(new hybridActions.LoadHybridFail(error)))
    );
  })
);

基本上不再需要对 Observable 进行猴子修补，现在您需要从 rxjs 导入该 timer 函数并改用它.

Basically there is no monkey patching of Observable anymore, now you need to import that timer function from rxjs and use that instead.

此处提供了有关此更改的更多信息:

More about this change is here:

https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

这篇关于Angular rxjs Observable.timer 不是带导入的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！