Question

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文件中的数据但是我得到了错误：

EXCEPTION：状态响应：200确认URL：app / apidata / products.json？callback = ng_jsonp .__ req0.finished＆amp; action = opensearch＆amp; search = asa＆amp; format = json < / p>

和

Subscriber.ts:241未捕获的响应{_body：＆＃34;注入JSONP的脚本未调用回调。＆＃34;，status：200，ok：true，statusText：＆＃34; Ok＆＃34;，headers ：标题......

Answer 1

也许喜欢这个问题：https://github.com/angular/angular/issues/8153

您尝试使用JsonP读取Json文件。像这个例子一样包装：http://jsonpwrapper.com/

获取错误为EXCEPTION：响应状态：200 Ok for URL：and uncaught

1 个答案: