web-dev-qa-db-ja.com

'input'の既知のプロパティではないため、 'typeahead'にバインドできません

Angular 2.1.2を使用していますが、バージョン1.1.16を使用しているng2-bootstrapの先行入力機能の使用に問題があります。Webpackも使用しています。基本的には次のとおりです。ウェブサイトの例ですが、先行入力フィールドの検索結果を提供するサービスを使用するように調整しました。なぜこのエラーが発生するのかわかりませんか？また、なぜ「選出された」と表示されるのか疑問に思います。以下のHTMLのように、「選択済み」ではなくエラーメッセージが表示されます。

Unhandled Promise rejection: Template parse errors:
Can't bind to 'typeahead' since it isn't a known property of 'input'. ("elected | json}}</pre>
                    <input [(ngModel)]="selected"
                           [ERROR ->][typeahead]="chipFamilies"
                           (typeaheadOnSelect)="typeaheadOnSelect($event)""): AppComponent@76:27 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'typeahead' since it isn't a known property of 'input'. ("elected | json}}</pre>
                    <input [(ngModel)]="selected"
                           [ERROR ->][typeahead]="chipFamilies"
                           (typeaheadOnSelect)="typeaheadOnSelect($event)""): AppComponent@76:27
    at TemplateParser.parse (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:7711:21)
    at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17193:53)
    at eval (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17098:85)
    at Set.forEach (native)
    at compile (eval at <anonymous> (http://localhost:3000/vendor.js:94:2), <anonymous>:17098:49)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:232:26)
    at Zone.run (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:114:43)
    at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:502:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:265:35)
    at Zone.runTask (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:154:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:3000/polyfills.js:2294:2), <anonymous>:401:35)

HTML：

     <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <pre class="card card-block card-header">Model: {{selected | json}}</pre>
                <input [(ngModel)]="selected"
                       [typeahead]="chipFamilies"
                       (typeaheadOnSelect)="typeaheadOnSelect($event)"
                       class="form-control" style="width: 250px;" placeholder="Search Chip Families">

            </div>
        </form>

TypeScript：

import {Component, OnInit} from '@angular/core';

import 'bootstrap/dist/css/bootstrap.css';
import '../css/main.css';

import {ChipFamilyService} from './chip-family/chip-family.service';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import { TypeaheadMatch } from '../../node_modules/ng2-bootstrap/components/typeahead/typeahead-match.class';

import { IChipFamily } from './chip-family/chip-family';

@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    providers: [ChipFamilyService]
})

export class AppComponent implements OnInit {
    public typeaheadLoading:boolean = false;
    public typeaheadNoResults:boolean = false;
    public dataSource:Observable<any>;
    public asyncSelected:string = '';
    public selected: string = '';
    chipFamilies: Array<IChipFamily>;
    errorMessage: string;

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

    ngOnInit() {
        this._adminService.getChipFamilies().subscribe(
            chipFamilies => this.chipFamilies = chipFamilies,
            error => this.errorMessage = <any>error
        );
        console.log('AppComponent initializing...');
    }

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

        return Observable.of(
            this.chipFamilies.filter((chipFamily:any) => {
                return query.test(chipFamily.name);
            })
        );
    }
    public changeTypeaheadLoading(e:boolean):void {
        this.typeaheadLoading = e;
    }

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

    public typeaheadOnSelect(e:TypeaheadMatch):void {
        console.log('Selected value: ', e.value);
    }
}
angularng2-bootstrap
8
occasl

おそらく、TypeaheadModuleをアプリのNgModule定義にインポートする必要があります。

import {TypeaheadModule} from 'ng2-bootstrap/components/typeahead';

@NgModule({
    imports : [
        //...
        TypeaheadModule
    ],
    //...
})
export class AppModule {}
7
PierreDuc

TypeaheadModuleをngx-bootstrapからインポートし、以下を使用してnpmにモジュールをインストールしてください。

import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; // or import { TypeaheadModule } from 'ngx-bootstrap'; @NgModule({ imports: [TypeaheadModule.forRoot(),...] }) export class AppModule(){} 

 2 
BlizZard