'錯誤：未捕獲的（在承諾）：無提供JSONP'（HTML/JavaScript的/打字稿/ Angular2）

截圖錯誤：'錯誤：未捕獲的（在承諾）：無提供JSONP'（HTML/JavaScript的/打字稿/ Angular2）

包含.ts文件代碼（SearchDisplay.component.ts ）：

.html文件代碼的

import {Component, OnInit} from 'angular2/core'; 
import {Router} from 'angular2/router'; 
import {Hero} from './hero'; 
import {HeroService} from './hero.service'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {HeroesComponent} from './heroes.component'; 
import {HeroDetailComponent} from './hero-detail.component'; 
import {DashboardComponent} from './dashboard.component'; 
import {SpreadSheetComponent} from './spreadsheeteditall.component'; 
import {SwitchUsersComponent} from './SwitchUsers.component'; 
import {BiddingPageComponent} from './BiddingPage.component'; 
import { Injectable } from 'angular2/core'; 
import { Jsonp, URLSearchParams } from 'angular2/http'; 



@Component({ 
    selector: 'SearchAndDisplayComponent', 
    templateUrl: 'app/SearchDisplay.component.html', 
    styleUrls: ['app/SearchDisplay.component.css'], 
    providers: [HeroService], 
    directives: [ROUTER_DIRECTIVES] 
}) 

@Injectable() 

export class SearchAndDisplayComponent{ 
    constructor(private jsonp: Jsonp) {} 
    search (term: string) { 
    let ebayURL = 'http://developer.ebay.com/Devzone/XML/docs/reference/ebay/index.html'; 
    var params = new URLSearchParams(); 
params.set('search', term); // the user's search value 
    params.set('action', 'opensearch'); 
    params.set('format', 'json'); 
    params.set('callback', 'JSONP_CALLBACK'); 
    // TODO: Add error handling 
    return this.jsonp 
       .get(ebayURL, { search: params }) 
       .map(request => <string[]> request.json()[1]); 
    } 


}

部分，我認爲可能會導致錯誤（SearchDisplay.component.html）：

<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255"  
value="" style="left: 396px; top: 153px; width: 293px; height: 26px;" /> 
<input class="search1" type="submit" name="submition" value="Search" style=" padding- 
bottom:20px; left: 691px; top: 153px; height: 23px" /> 
<button (click)="search(term)">Search</button> 
<script type="text/javascript"> 
    document.getElementById('frmSearch').onsubmit = function() { 
     window.location = 'local data here (not sure how to code this)' + document.getElementById('txtSearch').value; 
     return false; 
    } 
</script>

問題的上下文：我試圖爲一個基本上是eBay的克隆的網站創建一個搜索欄。

原始代碼來自維基百科示例搜索欄，但我想將其更改爲從ebay中提取數據（或者只創建一個僅包含「apple」和「car」可用的本地搜索欄）。

鏈接plunker /全壓縮項目文件張貼在這個問題：

當你引導應用程序或Search bar that hides results that aren't typed into it

來源

2016-05-16 Luna

你在你在更高的層次上注入提供商缺少JSONP_PROVIDERS可能一些更高級別的組件。

瞭解更多關於JSONP_PROVIDERS

的JSONP_PROVIDERS應自舉一個應用程序時，被包括在任一組件的噴射器，或在根注射器。

來源

2016-05-17 00:05:21

謝謝。現在它有點更好了。 – Luna

Angular2 final不支持jsonp提供程序。請參閱下面的正確答案。 – TrueBlue

萬一有人正在尋找現在這一點，角2是最終的，這可以通過在app.module.ts導入JsonpModule，像這樣來解決：

import { HttpModule, JsonpModule } from '@angular/http'; 

@NgModule({ 
    declarations: [], 
    imports: [ 
     HttpModule, 
     JsonpModule 
    ], 
    providers: [], 
    bootstrap: [] 
})

來源

2016-11-02 14:16:26 lordchancellor

這是當前的答案！ – TrueBlue

'錯誤：未捕獲的（在承諾）：無提供JSONP'（HTML/JavaScript的/打字稿/ Angular2）

回答

相關問題