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

Question

我刚刚开始使用 Angular 2 (RC 6)，我 运行 遇到了使用 ng2-bootstrap 的问题。我知道 RC 6 最近才出来，但我认为这只是我做错了什么而不是错误。

我正在尝试从 ng2-boostrap 演示页面重新创建一个基本演示，特别是 typeahead box 演示。这是我的 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)] 绑定，但看起来它已丢失。

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