我正在尝试实现NG2-Bootstrap 预输入但没有成功。
这是我的代码：
import {Component} from "angular2/core";
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap';
@Component({
selector: "side-bar",
directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
template: `
<div class="searchArea" [ngClass]="{searchAreaForceLargeWidth: forceShowSearch}">
<form class="searchBlock" [ngClass]="{searchBlockForceShow: forceShowSearch}">
<div class="form-group">
<input [(ngModel)]="asyncSelected"
[typeahead]="getAsyncData(getContext())"
(typeaheadLoading)="changeTypeaheadLoading($event)"
(typeaheadNoResults)="changeTypeaheadNoResults($event)"
(typeaheadOnSelect)="typeaheadOnSelect($event)"
[typeaheadOptionsLimit]="7"
placeholder="Locations loaded with timeout"
class="form-control">
</div>
</form>
</div>
`,
})
export class SideBarComponent {
forceShowSearch = false;
showCalendar = false;
dateFrom = "01/01/2023";
doSearch;
///////////
private selected: string = '';
private asyncSelected: string = '';
private typeaheadLoading: boolean = false;
private typeaheadNoResults: boolean = false;
private 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'];
private statesComplex: Array<any> = [
{ id: 1, name: 'Alabama' }, { id: 2, name: 'Alaska' }, { id: 3, name: 'Arizona' },
{ id: 4, name: 'Arkansas' }, { id: 5, name: 'California' },
{ id: 6, name: 'Colorado' }, { id: 7, name: 'Connecticut' },
{ id: 8, name: 'Delaware' }, { id: 9, name: 'Florida' },
{ id: 10, name: 'Georgia' }, { id: 11, name: 'Hawaii' },
{ id: 12, name: 'Idaho' }, { id: 13, name: 'Illinois' },
{ id: 14, name: 'Indiana' }, { id: 15, name: 'Iowa' },
{ id: 16, name: 'Kansas' }, { id: 17, name: 'Kentucky' },
{ id: 18, name: 'Louisiana' }, { id: 19, name: 'Maine' },
{ id: 21, name: 'Maryland' }, { id: 22, name: 'Massachusetts' },
{ id: 23, name: 'Michigan' }, { id: 24, name: 'Minnesota' },
{ id: 25, name: 'Mississippi' }, { id: 26, name: 'Missouri' },
{ id: 27, name: 'Montana' }, { id: 28, name: 'Nebraska' },
{ id: 29, name: 'Nevada' }, { id: 30, name: 'New Hampshire' },
{ id: 31, name: 'New Jersey' }, { id: 32, name: 'New Mexico' },
{ id: 33, name: 'New York' }, { id: 34, name: 'North Dakota' },
{ id: 35, name: 'North Carolina' }, { id: 36, name: 'Ohio' },
{ id: 37, name: 'Oklahoma' }, { id: 38, name: 'Oregon' },
{ id: 39, name: 'Pennsylvania' }, { id: 40, name: 'Rhode Island' },
{ id: 41, name: 'South Carolina' }, { id: 42, name: 'South Dakota' },
{ id: 43, name: 'Tennessee' }, { id: 44, name: 'Texas' },
{ id: 45, name: 'Utah' }, { id: 46, name: 'Vermont' },
{ id: 47, name: 'Virginia' }, { id: 48, name: 'Washington' },
{ id: 49, name: 'West Virginia' }, { id: 50, name: 'Wisconsin' },
{ id: 51, name: 'Wyoming' }];
private getContext() {
return this;
}
private _cache: any;
private _prevContext: any;
private getAsyncData(context: any): Function {
if (this._prevContext === context) {
return this._cache;
}
this._prevContext = context;
let f: Function = function(): Promise<string[]> {
let p: Promise<string[]> = new Promise((resolve: Function) => {
setTimeout(() => {
let query = new RegExp(context.asyncSelected, 'ig');
return resolve(context.states.filter((state: any) => {
return query.test(state);
}));
}, 200);
});
return p;
};
this._cache = f;
return this._cache;
}
private changeTypeaheadLoading(e: boolean) {
this.typeaheadLoading = e;
}
private changeTypeaheadNoResults(e: boolean) {
this.typeaheadNoResults = e;
}
private typeaheadOnSelect(e: any) {
console.log(`Selected value: ${e.item}`);
}
//////////
constructor() {
this.doSearch = function() {
//this.forceShowSearch = false;
console.log("Search");
};
}
}
上面的代码与 ng2-bootstrap 页面的示例页面基本相同。
我看不到结果。页面卡在“正在加载”中并抛出此异常：
angular2-polyfills.js:1243 SyntaxError: Unexpected token <
Evaluating http://localhost:3000/ng2-bootstrap
Error loading http://localhost:3000/app/main.js
at SystemJSLoader.__exec (http://localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16)
at entry.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3521:16)
at linkDynamicModule (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3126:32)
at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:2969:11)
at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3301:13)
at doDynamicExecute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:703:25)
at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:905:20)
at doLink (http://localhost:3000/node_modules/systemjs/dist/system.src.js:557:7)
at updateLinkSetOnLoad (http://localhost:3000/node_modules/systemjs/dist/system.src.js:605:18)
at http://localhost:3000/node_modules/systemjs/dist/system.src.js:417:11
我想知道：这就是一切吗？也许我错过了什么？