我是http:的新用户，我需要实现自动完成输入。
我已经阅读并将此exmple Angular2导入我的应用程序，但是当我运行它时会在浏览器控制台中收到此错误：
无法绑定到＆＃39; autocompleteOptionField＆＃39;因为它不是“输入”的已知属性。 （＆＃34;（autocompleteOnSelect）=＆＃34; autocompleteOnSelect（$ event）＆＃34; [错误 - ＆gt;] [autocompleteOptionField] =＆＃34;＆＃39;名称＆＃39;＆＃34;
组件http://www.angulartypescript.com/angular-2-autocomplete/：
ts我已将import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
import {AutocompleteContainer} from '../node_modules/autocomplete/autocomplete-container.ts';
import {Autocomplete} from '../node_modules/autocomplete/autocomplete.component.ts';
export const AUTOCOMPLETE_DIRECTIVES = [Autocomplete, AutocompleteContainer];
/*Angular 2 Autocomplete Example*/
@Component({
selector: 'my-app',
template:`
<div class='container-fluid'>
<h3>Angular 2 Autocomplete Example</h3>
<h4>The Selected Car: {{selectedCar}}</h4>
<input [(ngModel)]="selectedCar"
[autocomplete]="carsExample2"
(autocompleteOnSelect)="autocompleteOnSelect($event)"
[autocompleteOptionField]="'name'"
class="form-control">
<h3>Asynchronous results</h3>
<h4>Model: {{asyncSelectedCar}}</h4>
<input [(ngModel)]="asyncSelectedCar"
[autocomplete]="getAsyncData(getCurrentContext())"
(autocompleteLoading)="changeAutocompleteLoading($event)"
(autocompleteNoResults)="changeAutocompleteNoResults($event)"
(autocompleteOnSelect)="autocompleteOnSelect($event)"
[autocompleteOptionsLimit]="7"
placeholder="Locations loaded with timeout"
class="form-control">
<div [hidden]="autocompleteLoading!==true">
<i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
</div>
<div [hidden]="autocompleteNoResults!==true" class="" style="">
<i class="glyphicon glyphicon-remove"></i> Empty Query !
</div>
</div>
`,
directives: [AUTOCOMPLETE_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
})
export class Angular2Autocomplete {
private selectedCar:string = '';
private asyncSelectedCar:string = '';
private autocompleteLoading:boolean = false;
private autocompleteNoResults:boolean = false;
private carsExample1:Array<string> = ['BMW', 'Audi','Mercedes','Porsche','Volkswagen','Opel','Maserati','Volkswagen','BMW Serie 1','BMW Serie 2'];
private carsExample2:Array<any> = [
{id: 1, name: 'BMW'},
{id: 2, name: 'Audi'},
{id: 3, name: 'Mercedes'},
{id: 4, name: 'Porsche'},
{id: 5, name: 'Volkswagen'},
{id: 6, name: 'Opel'},
{id: 7, name: 'Maserati'},
{id: 8, name: 'Volkswagen'},
{id: 9, name: 'BMW Serie 1'},
{id: 10, name: 'BMW Serie 2'},
];
private getCurrentContext() {
return this;
}
private _cachedResult:any;
private _previousContext:any;
private getAsyncData(context:any):Function {
if (this._previousContext === context) {
return this._cachedResult;
}
this._previousContext = context;
let f:Function = function ():Promise<string[]> {
let p:Promise<string[]> = new Promise((resolve:Function) => {
setTimeout(() => {
let query = new RegExp(context.asyncSelectedCar, 'ig');
return resolve(context.carsExample1.filter((state:any) => {
return query.test(state);
}));
}, 500);
});
return p;
};
this._cachedResult = f;
return this._cachedResult;
}
private changeAutocompleteLoading(e:boolean) {
this.autocompleteLoading = e;
}
private changeAutocompleteNoResults(e:boolean) {
this.autocompleteNoResults = e;
}
private autocompleteOnSelect(e:any) {
console.log(`Selected value: ${e.item}`);
}
}
文件夹中提到的所有node_modules/autocomplete/文件导入其中。
任何人都可以帮助我？