TypeError: Observable_1.Observable.fromEvent 不是 ng2-bs3-modal/ng2-bs3-modal 模块中的函数

Question

当我尝试导航到使用 ng2-bs3-modal 的任何组件时，我遇到了错误。相同的代码在不同的应用程序中工作。#

我得到的错误。

core.js:1673 ERROR 错误：未捕获（承诺中）：TypeError：Observable_1.Observable.fromEvent 不是函数 TypeError: Observable_1.Observable.fromEvent 不是函数 在 ModalInstance.push../node_modules/ng2-bs3-modal/components/modal-instance.js.ModalInstance.init (modal-instance.js:52) 在新的 ModalInstance (modal-instance.js:12) 在新的 ModalComponent (modal.js:17) 在 createClass (core.js:9294) 在 createDirectiveInstance (core.js:9179) 在 createViewNodes (core.js:10399) 在 callViewAction (core.js:10715) 在 execComponentViewsAction (core.js:10634) 在 createViewNodes (core.js:10427) 在 createRootView (core.js:10313) 在 resolvePromise (zone.js:814) 在 resolvePromise (zone.js:771) 在 zone.js:873 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:3811) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 drainMicroTaskQueue (zone.js:595) 在 ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (zone.js:500) 在调用任务（zone.js:1540）

依赖##

dependencies": {
    "@angular/common": "~6.1.9",
    "@angular/compiler": "~6.1.9",
    "@angular/core": "~6.1.9",
    "@angular/forms": "~6.1.9",
    "@angular/http": "~6.1.9",
    "@angular/platform-browser": "~6.1.9",
    "@angular/platform-browser-dynamic": "~6.1.9",
    "@angular/router": "~6.1.9",
    "@ngui/datetime-picker": "^0.16.2",
    "angular-in-memory-web-api": "~0.6.1",
    "clipboard": "~1.7.1",
    "core-js": "~2.4.1",
    "ngx-pagination": "~3.1.1",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "systemjs": "~0.19.40",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.4",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "~6.0.3",
    "@ngui/utils": "~0.7.0",
    "@types/jasmine": "~2.5.36",
    "@types/node": "~6.0.46",
    "canonical-path": "~0.0.2",
    "concurrently": "~3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.0.2",
    "karma-jasmine-html-reporter": "~0.2.2",
    "lite-server": "~2.4.0",
    "lodash": "~4.17.11",
    "ng2-bs3-modal": "^0.10.4",
    "protractor": "~5.4.1",
    "rimraf": "~2.5.4",
    "tslint": "~3.15.1",
    "typescript": "~2.7.2"
  },
  "repository": {}
}

我的组件中的示例代码。

import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
import { NgxPaginationModule } from 'ngx-pagination';
import { IETLTaskSetup } from '../../../Models/etltasksetup';
import { DBOperation } from '../../../Shared/enum';
import { Environment } from '../../../Shared/enum';
import { Observable } from 'rxjs';
import { Global } from '../../../Shared/global';
import { ISecurity } from '../../../Models/security';

@Component({
    templateUrl: `../View/etltasksetup.component.html`
})

export class ETLTaskComponent implements OnInit {
    @ViewChild('modal') modal: ModalComponent;
    @ViewChild('modal2') modal2: ModalComponent;````

Answer 1

我将 ng2-bs3-modal 更新到最新版本 0.15.0。然后我更新了与 ng2-bs3-modal 相关的所有代码，如下所示 旧代码

<modal #modal2>
    <form >
        <modal-header [showDismiss]="true">

        </modal-header>
        <modal-body>

        </modal-body>
        <modal-footer style="background-color:cornsilk;">

        </modal-footer>
    </form>
<modal>

新代码

<bs-modal #modal2>
    <form >
        <bs-modal-header [showDismiss]="true">

        </bs-modal-header>
        <bs-modal-body>

        </bs-modal-body>
        <bs-modal-footer style="background-color:cornsilk;">

        </bs-modal-footer>
    </form>
</bs-modal>

Answer 2

你没有导入onInit

import { OnInit } from '@angular/core';

编辑：

不再支持Rxjs 6.x .fromEvent()。您必须向我们展示您在代码中使用它的位置。如果它发生在您的 NodeModule ModalInstance 中并且您无法控制代码，则需要摆脱旧模块或对其进行更新。

使用示例

// RxJS v6+
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

//create observable that emits click events
const source = fromEvent(document, 'click');
//map to string with given event timestamp
const example = source.pipe(map(event => `Event time: ${event.timeStamp}`));
//output (example): 'Event time: 7276.390000000001'
const subscribe = example.subscribe(val => console.log(val));