observables für api Anfrage in angular2

Question

Hallo ich bin eine Observable implementieren, um eine an meine Fähigkeit api zu bekommen und ich habe ein Problem im Moment, um die angeforderten Daten abzubilden. mein Array am Ende der Anfrage auf Null, ich denke, dass mein Problem in extractData() ist.

Das ist mein Service:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import { Skill } from './skill'; 

@Injectable() 
export class CatalogService { 
    private api = 'http://127.0.0.1:8000/api/'; 
    constructor(private http: Http) {} 

    getSkill(): Observable<Skill[]> { 
     return this.http.get(this.api + "skill") 
      .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, you 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); 
    } 
} 

Hier mein .ts ist, wo ich meinen Dienst rufen

import { Component, OnInit } from '@angular/core'; 
import {CatalogService} from './catalog.service'; 
import {Skill} from './skill'; 
@Component({ 
    selector: 'app-catalog', 
    templateUrl: './catalog.component.html', 
    styleUrls: ['./catalog.component.css'] 
}) 
export class CatalogComponent implements OnInit { 
    skills:Skill[]; 
    errorMessage:string; 
    mode = 'Observable'; 
    constructor(private catalogService: CatalogService) { } 

    ngOnInit() { 
     this.getSkill(); 
    } 
    getSkill() { 
     this.catalogService.getSkill() 
      .subscribe(
       skills => this.skills =skills, 
       error => this.errorMessage = <any>error); 
    } 
} 

Dies ist ein durch meine api Geschick zurück erhalten wird:

[ 
    { 
     "id": 2, 
     "experience": "null", 
     "typeskill": 1, 
     "profile": 2 
    }, 
    { 
     "id": 3, 
     "experience": "null", 
     "typeskill": 1, 
     "profile": 3 
    } 
] 

Ich schätze die Hilfe, um dieses Problem zu lösen.

Answer 1

Ich löse die Änderung der Funktion getSkill() in meinem Dienst dazu:

getSkill(): Observable<Response> { 
     return this.http.get(this.api + "skill")    
      .catch(this.handleError); 
    } 

Und die .ts zu dieser Datei:

getSkill() { 
    this.catalogService.getSkill() 
        .subscribe(
         res => this.skills =res.json(), 
         error => this.errorMessage = <any>error); 
    }