[英]Can't bind to 'typeahead' since it isn't a known property of 'input'
I'm using Angular 2.1.2 and I'm having trouble using ng2-bootstrap's typeahead feature, which I'm using version 1.1.16.我使用的是 Angular 2.1.2,但在使用 ng2-bootstrap 的预输入功能时遇到了问题,我使用的是 1.1.16 版。 I'm also using Webpack.
我也在使用 Webpack。 I basically following the example on the website, but I adjusted it to use a service I have which will provide the search results for the typeahead field.
我基本上遵循网站上的示例,但我对其进行了调整以使用我拥有的服务,该服务将为预先输入字段提供搜索结果。 Any idea why I'm getting this error?
知道为什么我会收到此错误吗? I'm also wondering why it says "elected" in the error message instead of "selected" like I have in the HTML below.
我也想知道为什么它在错误消息中说“已选择”而不是像我在下面的 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: 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);
}
}
You should probably import the TypeaheadModule
into your NgModule
definition of your app:您可能应该将
TypeaheadModule
导入应用程序的NgModule
定义中:
import {TypeaheadModule} from 'ng2-bootstrap/components/typeahead';
@NgModule({
imports : [
//...
TypeaheadModule
],
//...
})
export class AppModule {}
Import the TypeaheadModule from ngx-bootstap and make sure to install the module in npm using:从 ngx-bootstap 导入 TypeaheadModule 并确保使用以下命令在 npm 中安装模块:
npm i ngx-typeahead
npm ngx-typeahead
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
// or
import { TypeaheadModule } from 'ngx-bootstrap';
@NgModule({
imports: [TypeaheadModule.forRoot(),...]
})
export class AppModule(){}
应用指示的建议后,请确保已在模块中声明包含输入的组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.