Angular 2 - Bootstrap（Ng2-Bootstrap）typehead執行

我試圖執行NG2-Bootstrap typeahead沒有成功。Angular 2 - Bootstrap（Ng2-Bootstrap）typehead執行

這是我的代碼：

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-引導頁的樣本頁面。

我看不到結果。該頁面在「Loading」中被刪除並拋出此異常：

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

而我想知道：這是一切嗎？也許我錯過了什麼？

來源

2016-03-08 Marco Jr

您需要在您的SystemJS配置的映射塊添加一個條目：

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

來源

2016-03-08 14:31:22

你的意思是... main.ts ???這個？從「angular2/platform/browser」導入{bootstrap}; 從「angular2/router」導入{ROUTER_PROVIDERS}; 從「./app.component」導入{AppComponent}; bootstrap（AppComponent，[ROUTER_PROVIDERS]）; –

不，它是一些東西（'System.config（{...}）;'）你應該有你的HTML條目文件... –

謝謝！這個場景仍然是一樣的，但是也許我們前進了一步......可能還有更多的缺失步驟，或者我在某些方面犯了一些錯誤。順便說一下，我可以看到模塊被加載system.src.js –

我會回覆你所做的所有修改，直到你沒有任何更多的錯誤。包括您爲了添加指令所做的所有導入。然後補充一點：

import {TypeaheadModule} from 'ng2-bootstrap';

您app.module.ts並將其添加到您的進口，像這樣：

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

那麼它應該工作。

來源

2017-01-22 15:40:49 Anthony

Angular 2 - Bootstrap（Ng2-Bootstrap）typehead執行

回答

相關問題