使用ng2-bootstrap与Angular 2 RC 6 - 无法绑定到无法绑定到[...]，因为它不是[...]的已知属性

Question

我刚刚开始使用Angular 2（RC 6），我遇到了使用ng2-bootstrap的问题。 我知道RC 6最近出现了，但我认为这只是我做错了而不是一个bug。

我正在尝试从ng2-boostrap演示页面重新创建基本演示，特别是先行演示盒演示。 这是我的AppModule ：

import { NgModule, Component, ViewChild }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AlertModule, TypeaheadModule, Ng2BootstrapModule }   from 'ng2-bootstrap/ng2-bootstrap';
import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import { AppComponent }  from './app.component';


@NgModule({
  imports: [ BrowserModule, Ng2BootstrapModule, AlertModule, TypeaheadModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

然后是app.component：

import { Component, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Component({
    selector: 'my-app',
    templateUrl: 'app/main.html'
})
export class AppComponent {

  public customSelected:string = '';
  public selected:string = '';
  public dataSource:Observable<any>;
  public asyncSelected:string = '';
  public typeaheadLoading:boolean = false;
  public typeaheadNoResults:boolean = false;
  public states:Array<string> = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
    'California', 'Colorado',
    'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
    'Illinois', 'Indiana', 'Iowa',
    'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts',
    'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico',
    'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
    'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington',
    'West Virginia', 'Wisconsin', 'Wyoming'];
  public statesComplex:Array<any> = [
    {id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'},
    {id: 4, name: 'Arkansas'}, {id: 5, name: 'California'}];

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

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

    return Observable.of(
      this.statesComplex.filter((state:any) => {
        return query.test(state.name);
      })
    );
  }

  public changeTypeaheadLoading(e:boolean):void {
    this.typeaheadLoading = e;
  }

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

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

相关的HTML代码段：

  <input [typeahead]="states"
          (typeaheadOnSelect)="typeaheadOnSelect($event)"
          [typeaheadOptionsLimit]="7"
          [typeaheadOptionField]="'name'"
          [typeaheadMinLength]="0"
          placeholder="Typeahead inside a form"
          class="form-control">

我得到的错误是这样的：

Can't bind to 'typeahead' since it isn't a known property of 'input'. ("
  <h4>Typeahead inside a form</h4>

  <input [ERROR ->][typeahead]="states"
          (typeaheadOnSelect)="typeaheadOnSelect($event)"
          [typeaheadOp"): AppComponent@12:9
Can't bind to 'typeaheadOptionsLimit' since it isn't a known property of 'input'. ("
[....]

最后，这是我的系统js配置：

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      'moment': 'node_modules/moment/moment.js',
      'ng2-bootstrap': 'node_modules/ng2-bootstrap'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: { main: './main.js', defaultExtension: 'js' },
      rxjs: { defaultExtension: 'js' },
      'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
      'ng2-bootstrap': {defaultJSExtensions: true}
    }
  });
})(this);

有没有人有什么建议？ 目前我可以看到ng2-bootstrap应该在SystemJS中加载，我认为在AppModule中的导入是正确的，一切都应该在那里工作，但我显然遗漏了一些东西。

Answer 1

未找到或匹配Typeahead。 我怀疑它没有匹配。

根据这里的文档（ https://valor-software.com/ng2-bootstrap/#/typeahead），typeahead的选择器需要一个看起来像缺少的[（ngModel）]绑定。

将组件中的字符串绑定到ngModel，如<input [(ngModel)]="selected" ... > ，然后Typeahead选择器应该启动。