angularjs - 将 ng2-bootstrap 与 Angular 2 RC 6 一起使用 - 无法绑定(bind)到无法绑定(bind)到 [...] 因为它不是 [...] 的已知属性

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)] 绑定(bind)，但它看起来好像缺失了。

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