2016-12-07 9 views
0
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取得エラー:ステータス応答:URLの200 OK:とキャッチされない

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ファイル 内のデータを検索し、入力ボタンを作成したが、

例外:ステータス応答:URLためのOK 200:?アプリ/ apidata/products.jsonコールバック= ng_jsonp .__ REQ0私はエラーを得ました。終了&アクション= OpenSearchの&検索= ASA &形式= JSON

Subscriber.ts:241キャッチされないレスポンス{_body: "JSONPは、スクリプトがコールバックを呼び出しませんでした注入さ。"、状態:200 、[OK]:真、STATUSTEXT: "OK"、ヘッダ:たぶん、この問題のようなヘッダ...

+0

products.jsonは有効なjsonp形式である必要があります。それは...ですか ? – anshuVersatile

答えて

関連する問題