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);
        }
      );
  }
}

浏览器中的错误消息：

错误TypeError： 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） at Object.eval [作为updateDirectives]（HomeComponent_Host.ngfactory.js？[sm]：1）在Object.debugUpdateDirectives [作为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 push ../ 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 推../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js：16895（匿名）@ core.js：16779 push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke @ zone.js：388 onInvoke @ core.js：16156 push ../ 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 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js：134 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js：77 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js：54 push ../ node_modules / rxjs / _esm5 / internal / Subject.js.Subject.next @ Subject.js：47 push ../ node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js：12593 checkStable @ core.js：16125 onHasTask @ core.js：16169 push ../ 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：205rainMicroTaskQueue @ zone.js：595 Promise.then（异步） scheduleMicroTask @ zone.js：578 push ../ 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 push ../ 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 @引导程序：78 0 @ main.ts：12 webpack_require @引导程序：78 checkDeferredModules @引导程序：45 webpackJsonpCallback @引导程序：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 push ../ 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 推../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js：16895（匿名）@ core.js：16779 push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke @ zone.js：388 onInvoke @ core.js：16156 push ../ 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 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js：134 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js：77 推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js：54 push ../ node_modules / rxjs / _esm5 / internal / Subject.js.Subject.next @ Subject.js：47 push ../ node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js：12593 checkStable @ core.js：16125 onHasTask @ core.js：16169 push ../ 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：205rainMicroTaskQueue @ zone.js：595 Promise.then（异步） scheduleMicroTask @ zone.js：578 push ../ 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 push ../ 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 @引导程序：78 0 @ main.ts：12 webpack_require @引导程序：78 checkDeferredModules @引导程序：45 webpackJsonpCallback @引导程序：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);
        }
      );
  }
}

rxjs obervable.interval（）;在浏览器中不会引发函数异常

1 个答案: