Angular rxjs Observable.timer不是导入功能 [英] Angular rxjs Observable.timer is not a function with import

问题描述

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

In my angular application I recieve the following error:

错误TypeError: 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中 (Subscriber.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中 (Subscriber.js:54) 在ScannedActionsSubject.push ../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.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 (Subscriber.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)))
      );
    })
  );
}

我一直在网上浏览，对我来说，最新的角度版本将使用

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?

推荐答案

如果将最新的angular与RxJS 6一起使用，则需要这样做:

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屋！