错误的屏幕截图:
.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的链接发布在这个问题中:
你缺少在更高级别注入的提供程序中的JSONP_PROVIDERS可能是在引导应用程序时或在某些更高级别的组件中.
阅读更多关于JSONP_PROVIDERS
JSONP_PROVIDERS应该包含在组件的注入器中,或者在引导应用程序时包含在根注入器中.