Question

我正在尝试实施NG2-Bootstrap typeahead但没有成功。

这是我的代码：

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

我在想：这就是一切吗？也许我错过了什么？

Answer 1

我会还原您所做的所有更改，直到您没有任何其他错误为止。包括您为了添加指令而进行的所有导入。然后添加：

import {TypeaheadModule} from 'ng2-bootstrap';

到您的app.module.ts并将其添加到您的导入中，如下所示：

imports: [
    ...,
    TypeaheadModule.forRoot()
],

然后它应该工作。

Answer 2

您需要在SystemJS配置的地图块中添加一个条目：

<script>
  System.configure({
    map: {
      'ng2-bootstrap': 'node_modules/ng2-bootstrap'
    },
    packages: {
      (...)
    }
  });
  System.import(...);
</script>

Angular 2 - Bootstrap（Ng2-Bootstrap）预先实现

2 个答案: