3

Angular 2 (RC 6) を使い始めたばかりで、ng2-bootstrap の使用で問題が発生しました。RC 6 がごく最近出たのは知っていますが、これはバグというよりも、私が間違ったことをしているだけだと思います。

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 で正しく、そこからすべてが機能するはずですが、明らかに何かが欠けています。

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 に答える