错误的屏幕截图:
.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 /完整压缩项目文件的链接:
答案 0 :(得分:10)
万一有人现在正在搜索Angular 2是最终的,这可以通过导入JsonpModule
中的app.module.ts
来解决,如下所示:
import { HttpModule, JsonpModule } from '@angular/http';
@NgModule({
declarations: [],
imports: [
HttpModule,
JsonpModule
],
providers: [],
bootstrap: []
})
答案 1 :(得分:7)
您缺少JSONP_PROVIDERS
在您必须注入更高级别的提供程序中,可能是您在引导应用程序时或在某些更高级别的组件中。
详细了解JSONP_PROVIDERS
JSONP_PROVIDERS应该包含在组件的注入器中,或者在引导应用程序时包含在根注入器中。