‘错误:未捕获(承诺):没有Jsonp的提供者'(HTML / Javascript / Typescript / Angular2)

前端之家收集整理的这篇文章主要介绍了‘错误:未捕获(承诺):没有Jsonp的提供者'(HTML / Javascript / Typescript / Angular2)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
错误的屏幕截图:

.ts文件代码(SearchDisplay.component.ts):

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]);
  }


}

我认为可能导致错误的.html文件代码的一部分(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 / full zipped project file的链接发布在这个问题中:

Search bar that hides results that aren’t typed into it

你缺少在更高级别注入的提供程序中的JSONP_PROVIDERS可能是在引导应用程序时或在某些更高级别的组件中.

阅读更多关于JSONP_PROVIDERS

JSONP_PROVIDERS应该包含在组件的注入器中,或者在引导应用程序时包含在根注入器中.

猜你在找的Json相关文章