rxjs observable.interval();在浏览器中不引发函数异常[重复]

Question

component.ts 文件如下所示。为什么即使在从 rxjs/add/observable/interval 导入间隔后仍然抛出错误。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit() {
      const myNumber = Observable.interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}

浏览器中的错误消息：

错误类型错误： rxjs_Observable__WEBPACK_IMPORTED_MODULE_2__.Observable.interval 是 不是函数 在 HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit (home.component.ts:15) 在 checkAndUpdateDirectiveInline (core.js:20665) 在 checkAndUpdateNodeInline (core.js:21929) 在 checkAndUpdateNode (core.js:21891) 在 debugCheckAndUpdateNode (core.js:22525) 在 debugCheckDirectivesFn (core.js:22485) 在 Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js?[sm]:1) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:22477) 在 checkAndUpdateView (core.js:21873) 在 callViewAction (core.js:22114) View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js？ [sm]:1 proxyClass@compiler.js:17945 push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @core.js:14645（匿名）@core.js:16895 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895（匿名）@core.js:16779 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:16156 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @core.js:16070 下一个 @core.js:16779 schedulerFn @core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @订阅者.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @订阅者.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @订阅者.js:54 推../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ 主题.js:47 推../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable@core.js:16125 onHasTask@core.js:16169 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask@zone.js:578 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @zone.js:232 推../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @core.js:16660 ./src/main.ts @main.ts:11 __webpack_require @ bootstrap:78 0 @ main.ts:12 webpack_require@bootstrap:78 checkDeferredModules@bootstrap:45 webpackJsonpCallback@bootstrap:32（匿名）@main.js:1 HomeComponent_Host.ngfactory.js？ [sm]:1 错误上下文 DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}} View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js？ [sm]:1 proxyClass@compiler.js:17945 push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @core.js:22729 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @core.js:14650（匿名）@core.js:16895 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @core.js:16115 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:16895（匿名）@core.js:16779 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:16156 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @core.js:16070 下一个 @core.js:16779 schedulerFn @core.js:12609 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @Subscriber.js:196 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @订阅者.js:134 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @订阅者.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @订阅者.js:54 推../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ 主题.js:47 推../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:12593 checkStable@core.js:16125 onHasTask@core.js:16169 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async) scheduleMicroTask@zone.js:578 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @zone.js:232 推../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252 scheduleResolveOrReject @ zone.js:862 ZoneAwarePromise.then @ zone.js:962 push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @core.js:16660 ./src/main.ts @main.ts:11 __webpack_require @ bootstrap:78 0 @ main.ts:12 webpack_require@bootstrap:78 checkDeferredModules@bootstrap:45 webpackJsonpCallback@bootstrap:32（匿名）@main.js:1

Answer 1

试试这个：

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit() {
      const myNumber = interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}