Angular 2 - Bootstrap (Ng2-Bootstrap) implémentation typeahead

Question

Je suis en train d'implémenter le NG2-Bootstrap typeahead sans succès.

Ceci est mon 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"); 
    }; 
} 
} 

Le code ci-dessus est fondamentalement la même de la page échantillon de la page NG2-bootstrap.

Je ne peux pas voir les résultats. La page se stucked dans « Chargement » et lancer cette 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 

Et je me demandais: Est-ce tout? Peut-être que j'ai raté quelque chose?

Answer 1

Vous devez ajouter une entrée dans le bloc de carte de votre configuration SystemJS:

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

Answer 2

Je retournions tous les changements que vous avez fait, jusqu'à ce que vous n'avez pas plus d'erreurs. Y compris toutes les importations que vous avez faites pour ajouter la directive. Ensuite, ajoutez ceci:

import {TypeaheadModule} from 'ng2-bootstrap'; 

à votre app.module.ts et l'ajouter à vos importations comme ceci:

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

Ensuite, il devrait fonctionner.