【发布时间】:2017-04-22 11:16:48
【问题描述】:
productsearch.service.ts
import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class ProductsearchService {
private _url: string = 'app/apidata/products.json'
constructor(private jsonp: Jsonp) {}
search(term: string) {
console.log(this.term);
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('app/apidata/products.json?callback=JSONP_CALLBACK', { search})
.map((request) => request.json()[1]);
}
productsearch.component.ts
import {Component} from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import { ProductsearchService } from './productsearch.service';
@Component({
selector:'app-productsearch',
template:`<h1>product search</h1>
<input type="text" [formControl]="term">
<ul>
<li *ngFor="let p of products | async">{{p.ITEM}}</li>
</ul>
`
})
export class ProductsearchComponent{
products: Observable<Array<string>>;
term = new FormControl();
constructor(private productsearchService: ProductsearchService){}
ngOnInit() {
this.products = this.term.valueChanges
.debounceTime(400)
.distinctUntilChanged()
.switchMap(term => this.productsearchService.search(term));
}
}
}
我创建了输入按钮来搜索 products.json 文件中的数据 但我得到了错误:
例外:响应状态为:200 Ok for URL:app/apidata/products.json?callback=ng_jsonp.__req0.finished&action=opensearch&search=asa &format=json
和
Subscriber.ts:241 Uncaught Response {_body: "JSONP 注入脚本没有调用回调。", status: 200, ok: true, statusText: "Ok", headers: Headers...
【问题讨论】:
-
products.json 应该是有效的 jsonp 格式。是吗?
标签: angular