Angular2 REST API

我學習Angular2，現在我嘗試從休息服務中獲取我的數據。我的休息服務工作，我可以從那裏獲取數據。Angular2 REST API

但角總是給我此錯誤消息：JSON.parse：意外的字符位於第1行的JSON數據的第1列

這是我的服務：

import { Injectable }  from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 

import { Person } from '../_models/person'; 
import { Observable }  from 'rxjs/Observable'; 

@Injectable() 
export class PersonService { 
    private headers: Headers; 

    constructor(private http: Http) 
    { 
     this.headers = new Headers(); 
     this.headers.append('Content-Type', 'application/json'); 
     this.headers.append('Accept', 'application/json'); 
    } 

    getPersons(): Observable<Person[]> { 
     return this.http.get('http://localhost:54612/api/Person') 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || {}; 
    } 

    private handleError(error: Response | any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 
}

這是成分爲觀點：

import { Component, OnInit } from '@angular/core'; 
import { Person } from '../_models/person'; 
import { PersonService } from '../_services/person.service'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html', 
    providers: [ PersonService ] 
}) 

export class LoginComponent implements OnInit { 
    errorMessage: string; 
    personen: Person[] = []; 

    constructor(private personService: PersonService) { } 

    ngOnInit() { this.getPersons(); } 

    getPersons() { 
     this.personService.getPersons() 
      .subscribe(
      personen => this.personen = personen, 
      error => this.errorMessage = <any>error); 
    } 
}

這是我的看法：

<h1>Tour of Heroes</h1> 
<h3>Heroes:</h3> 
<ul> 
    <li *ngFor="let person of personen">{{person.IDPerson}}</li> 
</ul> 
<p class="error" *ngIf="errorMessage">{{errorMessage}}</p>

來源

2016-12-27 Ryter

你嘗試登錄返回的JSON/JSON解析，看看有什麼數據的模樣？也許問題出在'本地主機上運行的API：54612' – Samuel

我得到這個從API：<住址我：無=」真」 /><電子郵件I：無= 「真」/> 0001-01-01T00：00 ：00<土地我：無= 「真」/><名稱I：無= 「真」/><的Ort我：無=「真「/> 0001-01-01T00：00：00<電話我：無= 「真」/>。你是這個意思嗎？ – Ryter

這不是JSON。 json以'{'開始，並具有諸如'「key」：「value」這樣的鍵值，然後用'}'結束我猜這就是爲什麼你不能解析json的原因。 – Samuel

您的服務器返回XML。原因可能是因爲當你沒有明確地將Accept設置爲別的東西時它是默認的。您已將它設置爲Headers中的JSON，但您絕不會將標頭添加到請求中。你需要做的

this.http.get('http://localhost:54612/api/Person', { headers: this.headers });

來源

2016-12-27 17:40:03

謝謝你，你是對的。我只需要設置我的標題。什麼是facepalm：D – Ryter

試試這個片段，在你getPersons（）

return this.http.get('http://localhost:54612/api/Person',{headers: this.headers }) 
     .map((response:Response) => response.json())

來源

2016-12-27 17:53:41

回答

相關問題