Question

我已经看到这个问题在Angular 2中相当普遍，但我没有看到任何有助于我的特殊情况。

具体来说，我正在创建一个从API（需要API密钥）中提取数据的应用程序，其结果特别是XML格式。我要做的是在用户输入搜索参数时调用API，让API返回结果，然后最终在同一屏幕上显示结果。

然而，我一直遇到相同的“意外的令牌＆lt;”错误，错误的来源是API本身的URL。我怀疑这个问题源于我试图以JSON身份返回身体的事实，但我之前从未遇到过这个问题所以我希望社区可以提供帮助！

以下是我的服务和组件代码：

搜索-bar.component.ts

import { Component, Output, Input, EventEmitter } from '@angular/core';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

import { Search } from './search';
import { ZillowSearchService } from './zillow-search.service';


@Component({
    moduleId: module.id,
    selector: 'search-bar',
    templateUrl: `search-bar.component.html`,
    styles: [
        `input {
            width: 50%;
            margin-left: 25%;
            margin-top: 15%;
            color: black;
            height: 40px;
        }
        button {
            border-radius: 5px;
            margin-top: 5%;
            margin-left: 45%;
        }
        `
    ]
})
export class SearchBarComponent {
    getSearchResults: string;
    model = new Search("");
    constructor( private zillowSearchService: ZillowSearchService) {}
    private sub: any;
    public state: string = "" ;
    data: string;

   onSubmit(){
        this.zillowSearchService.searchZillow("New Mexico")
                .subscribe(
                data => console.log(data),
                error => console.log("Error: " + error)
                );
    }
}

Zillow的-search.service.ts ：

import { Inject, Injectable } from '@angular/core';
import { Http, Headers, Response, Jsonp } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import '../rxjs-operators';

import { AppConfig } from './app-config';
import { Search } from './search';

let api = AppConfig.baseUrls.api;
let url = AppConfig.baseUrls.base;

@Injectable() 
export class ZillowSearchService {
  public state: string;
  constructor ( @Inject(Jsonp) private jsonp: Jsonp) {
     //this.http = http;
  }
  protected results: any;

  searchZillow(statevar: any) {
    console.log("Before" + statevar);
    var queryString = url + `?zws-id=${api}&state=${statevar}&callback=JSONP_CALLBACK`;

    return this.jsonp 
          .get(queryString, new Headers({ "Content-type":
"application/xml", "Accept": "application/xml", 
          "Access-Control-Allow-Origin": "*" }))
          .map((res: Response) => res.json())
          //.map(res => console.log("TEST"));
          //.map((res) => {
            //return
          //});;
    }
  }

有关其他一些细节，查看控制台和网络，我可以看到“类型”列为脚本，启动器是http.umd.js，它指向BrowserJsonp.send（如果这有助于提供者）任何背景都可以。）

如果您希望我包含任何其他代码段，请告诉我，我非常感谢您的帮助和指导！

Answer 1

您提到结果是XML格式，但我在您的服务底部看到此代码：

    return this.jsonp 
      .get(queryString, new Headers({ "Content-type":
      "application/xml", "Accept": "application/xml", 
      "Access-Control-Allow-Origin": "*" }))
      .map((res: Response) => res.json())
      //.map(res => console.log("TEST"));
      //.map((res) => {
        //return
      //});;
}

我不确定你是否能够以这种方式将响应映射到json - 我认为它实际上期望JSON存在于文字中，它将映射到您可以使用的类型对象。

所以问题是你试图将xml解析为json - 因此错误说它无法解析第一个＆＃34;＆lt;＆＃34;，因为它不是有效的json。

您可能需要某种xml解析器来解决这个问题 - 在这种情况下我会寻找第三方库：）

编辑：要清楚，我认为这一行：

.map((res: Response) => res.json())

导致了这个问题，因为它说这个输入json响应并将其转换为可用的javascript对象 - 但它无法解析它，因为响应是XML格式的。

Angular 2 Uncaught SyntaxError：意外的令牌＆lt;

1 个答案: