ng-bootstrap的typeahead出现TypeError：Object（...）不是函数错误。

Question

ng-bootstrap的typeahead出现TypeError：Object（...）不是函数错误。

angulartypescripttypeaheadng-bootstraptypeerror

7

我想在Angular5应用程序中使用Angular Bootstrap Typeahead linkToTypeahead 。但我一直收到以下错误信息：

ERROR TypeError: Object(...) is not a function
at new NgbTypeahead (typeahead.js:52)
at createClass (core.js:12449)
at createDirectiveInstance (core.js:12284)
at createViewNodes (core.js:13742)
at callViewAction (core.js:14176)
at execComponentViewsAction (core.js:14085)
at createViewNodes (core.js:13770)
at callViewAction (core.js:14176)
at execComponentViewsAction (core.js:14085)
at createViewNodes (core.js:13770)

并且：

ERROR TypeError: Cannot read property 'instance' of undefined
at nodeValue (core.js:11753)
at Object.eval [as handleEvent] (NgbdTypeaheadBasic.html:9)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)
at HTMLDocument.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)

我从链接中复制了Simple Typeahead代码。我的package.json文件如下：

{
  "name": "test-type-ahead",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0",
    "bootstrap": "^4.1.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

我尝试过以下方法：

使用npm重新安装node_modules - 没有帮助
使用angular CLI启动一个全新的项目并在其中尝试代码 - 没有帮助

如有任何帮助，将不胜感激！

- somaba

1

2.0.0-alpha.0是一个未记录的alpha版本，据我所知，这是Angular 6中使用的初步版本。请使用最新稳定版本的ng-bootstrap：1.1.1。 - JB Nizet

2

使用 ng-bootstrap：1.1 版本，并在导入 ng-bootstrap 的主模块时不要忘记在 app.module 中使用 .forRoot()。 - Niladri

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- somaba · Accepted Answer

我的问题通过安装一个稳定版本的ng-bootstrap解决了:

所以package.json文件：

`dependencies
 ....
 "@ng-bootstrap/ng-bootstrap": "^1.1.1",
 ....
 dependencies`

感谢JB Nizet和Niladri的快速解答。

编辑：另外，如@Niladri在评论中所说，您需要使用forRoot()来使用要使用的模块。这是适用于Angular 5的版本1.1的官方文档中指出的，但新版本的Angular的新文档没有这样说明，因为已进行了更改。所以请记住！