角2 - 引导（NG2-引导）预输入执行 [英] Angular 2 - Bootstrap (Ng2-Bootstrap) typeahead implementation
本文介绍了角2 - 引导（NG2-引导）预输入执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实现 NG2-引导预输入与没有成功。
这是我的code：
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");
};
}
}
上面的code是基本相同的NG2-引导页的样本页面。
The code above is basically the same of the sample page of the ng2-bootstrap page.
我看不到结果。该页面获得加载stucked并抛出这个异常：
I cannot see results. The page get stucked in "Loading" and throw this exception:
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
和我想知道：这一切吗？也许我错过了什么？
And I was wondering : Is this everything ? Maybe I missed something ?
推荐答案
您需要在您的SystemJS配置的映射块添加一个条目：
You need to add an entry in the map block of your SystemJS configuration:
<script>
System.configure({
map: {
'ng2-bootstrap': 'node_modules/ng2-bootstrap'
},
packages: {
(...)
}
});
System.import(...);
</script>
这篇关于角2 - 引导（NG2-引导）预输入执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
