无法绑定到 'typeahead',因为它不是 'input' 的已知 属性
Can't bind to 'typeahead' since it isn't a known property of 'input'
我正在使用 Angular 2.1.2,但在使用 ng2-bootstrap 的预输入功能时遇到了问题,我正在使用 1.1.16 版。我也在使用 Webpack。我基本上遵循网站上的示例,但我将其调整为使用我拥有的服务,该服务将为 typeahead 字段提供搜索结果。知道为什么我会收到此错误吗?我也想知道为什么它在错误消息中说 "elected" 而不是 "selected" 就像我在下面的 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>
打字稿:
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);
}
}
您可能应该将 TypeaheadModule
导入您的应用的 NgModule
定义中:
import {TypeaheadModule} from 'ng2-bootstrap/components/typeahead';
@NgModule({
imports : [
//...
TypeaheadModule
],
//...
})
export class AppModule {}
从 ngx-bootstrap 导入 Typeahead 模块并确保使用以下命令在 npm 中安装该模块:
npm i ngx-typeahead
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
// or
import { TypeaheadModule } from 'ngx-bootstrap';
@NgModule({
imports: [TypeaheadModule.forRoot(),...]
})
export class AppModule(){}
应用指示的建议后,确保包含输入的组件已在模块中声明
我正在使用 Angular 2.1.2,但在使用 ng2-bootstrap 的预输入功能时遇到了问题,我正在使用 1.1.16 版。我也在使用 Webpack。我基本上遵循网站上的示例,但我将其调整为使用我拥有的服务,该服务将为 typeahead 字段提供搜索结果。知道为什么我会收到此错误吗?我也想知道为什么它在错误消息中说 "elected" 而不是 "selected" 就像我在下面的 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>
打字稿:
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);
}
}
您可能应该将 TypeaheadModule
导入您的应用的 NgModule
定义中:
import {TypeaheadModule} from 'ng2-bootstrap/components/typeahead';
@NgModule({
imports : [
//...
TypeaheadModule
],
//...
})
export class AppModule {}
从 ngx-bootstrap 导入 Typeahead 模块并确保使用以下命令在 npm 中安装该模块:
npm i ngx-typeahead
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
// or
import { TypeaheadModule } from 'ngx-bootstrap';
@NgModule({
imports: [TypeaheadModule.forRoot(),...]
})
export class AppModule(){}
应用指示的建议后,确保包含输入的组件已在模块中声明