无法绑定到 'typeahead',因为它不是 'input' 的已知 属性

Can't bind to 'typeahead' since it isn't a known property of 'input'

我正在使用 Angular 2.1.2,但在使用 ng2-bootstrap 的预输入功能时遇到了问题,我正在使用 1.1.16 版。我也在使用 Webpack。我基本上遵循网站上的示例,但我将其调整为使用我拥有的服务,该服务将为 typeahead 字段提供搜索结果。知道为什么我会收到此错误吗?我也想知道为什么它在错误消息中说 "elected" 而不是 "selected" 就像我在下面的 HTML 中说的那样。

Unhandled Promise rejection: Template parse errors:
Can't bind to 'typeahead' since it isn't a known property of 'input'. ("elected | json}}</pre>
                    <input [(ngModel)]="selected"
                           [ERROR ->][typeahead]="chipFamilies"
                           (typeaheadOnSelect)="typeaheadOnSelect($event)""): AppComponent@76:27 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'typeahead' since it isn't a known property of 'input'. ("elected | json}}</pre>
                    <input [(ngModel)]="selected"
                           [ERROR ->][typeahead]="chipFamilies"
                           (typeaheadOnSelect)="typeaheadOnSelect($event)""): AppComponent@76:27
    at TemplateParser.parse (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:7711:21)
    at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17193:53)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17098:85)
    at Set.forEach (native)
    at compile (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17098:49)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:232:26)
    at Zone.run (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:114:43)
    at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:502:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:265:35)
    at Zone.runTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:154:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:401:35) 

HTML:

     <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <pre class="card card-block card-header">Model: {{selected | json}}</pre>
                <input [(ngModel)]="selected"
                       [typeahead]="chipFamilies"
                       (typeaheadOnSelect)="typeaheadOnSelect($event)"
                       class="form-control" style="width: 250px;" placeholder="Search Chip Families">

            </div>
        </form>

打字稿:

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

import 'bootstrap/dist/css/bootstrap.css';
import '../css/main.css';

import {ChipFamilyService} from './chip-family/chip-family.service';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import { TypeaheadMatch } from '../../node_modules/ng2-bootstrap/components/typeahead/typeahead-match.class';

import { IChipFamily } from './chip-family/chip-family';

@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    providers: [ChipFamilyService]
})

export class AppComponent implements OnInit {
    public typeaheadLoading:boolean = false;
    public typeaheadNoResults:boolean = false;
    public dataSource:Observable<any>;
    public asyncSelected:string = '';
    public selected: string = '';
    chipFamilies: Array<IChipFamily>;
    errorMessage: string;

    public constructor(private _adminService: ChipFamilyService) {
        this.dataSource = Observable.create((observer:any) => {
            // Runs on every search
            observer.next(this.asyncSelected);
        }).mergeMap((token:string) => this.getChipFamiliesAsObservable(token));
    }

    ngOnInit() {
        this._adminService.getChipFamilies().subscribe(
            chipFamilies => this.chipFamilies = chipFamilies,
            error => this.errorMessage = <any>error
        );
        console.log('AppComponent initializing...');
    }

    public getChipFamiliesAsObservable(token:string):Observable<any> {
        let query = new RegExp(token, 'ig');

        return Observable.of(
            this.chipFamilies.filter((chipFamily:any) => {
                return query.test(chipFamily.name);
            })
        );
    }
    public changeTypeaheadLoading(e:boolean):void {
        this.typeaheadLoading = e;
    }

    public changeTypeaheadNoResults(e:boolean):void {
        this.typeaheadNoResults = e;
    }

    public typeaheadOnSelect(e:TypeaheadMatch):void {
        console.log('Selected value: ', e.value);
    }
}

您可能应该将 TypeaheadModule 导入您的应用的 NgModule 定义中:

import {TypeaheadModule} from 'ng2-bootstrap/components/typeahead';

@NgModule({
    imports : [
        //...
        TypeaheadModule
    ],
    //...
})
export class AppModule {}

从 ngx-bootstrap 导入 Typeahead 模块并确保使用以下命令在 npm 中安装该模块:

npm i ngx-typeahead

 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
// or
import { TypeaheadModule } from 'ngx-bootstrap';

@NgModule({
  imports: [TypeaheadModule.forRoot(),...]
})
export class AppModule(){}

应用指示的建议后,确保包含输入的组件已在模块中声明