3

我刚刚开始使用 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);

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

4

1 回答 1

1

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

根据此处的文档（https://valor-software.com/ng2-bootstrap/#/typeahead），typeahead 的选择器需要一个 [(ngModel)] 绑定，看起来好像它丢失了。

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

于 2016-09-07T09:01:38.883 回答