無法綁定到「鍵入」，因爲它不是「輸入」的已知屬性

Question

我正在使用Angular 2.1.2，並且在使用ng2-bootstrap的typeahead功能時遇到問題1.1.16。我也在使用Webpack。我基本上遵循網站上的例子，但我調整它使用我將提供typeahead領域的搜索結果的服務。任何想法，爲什麼我得到這個錯誤？我也想知道爲什麼它會在錯誤消息中顯示「選擇」而不是像我在下面的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); 
    } 
} 

Answer 1

你或許應該導入TypeaheadModule到您的應用程序的NgModule定義：

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

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