Angular2 REST API

Question

Ich lerne Angular2 und jetzt versuche ich meine Daten von einem Rest Service zu bekommen. Mein Ruhe-Service funktioniert und ich kann Daten von dort bekommen.

Aber Winkel immer gebe meine diese Fehlermeldung: JSON.parse: unerwartetes Zeichen in Zeile 1, Spalte 1 der JSON-Daten

Das ist mein Service:

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); 
    } 
} 

Dies ist die Komponente für die Ausblick:

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); 
    } 
} 

Und das ist meine Ansicht:

<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> 

Answer 1

Ihr Server ist Return-XML. Der Grund ist wahrscheinlich, dass es der Standardwert ist, wenn Sie Accept nicht explizit auf etwas anderes setzen. Sie haben es in Headers zu JSON festgelegt, aber Sie fügen der Anforderung die Header nie hinzu. Sie müssen

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

Answer 2

Versuchen Sie, diese Schnipsel, in Ihrem getPersons tun()

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