angular2のapiリクエストの観測値

Question

こんにちは私は自分のスキルAPIを取得するために観測値を実装していますが、要求されたデータをマップする際に問題があります。 リクエストの最後の配列がnullのままになっている、私の問題はextractData（）にあると思います。

これは私のサービスである：

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

：ここ

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

は、私はこれは私のAPIスキルによって返されますです

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

私のサービスを呼び出す私.TSです私はこの問題を解決する助けに感謝します。

Answer 1

私はこれに私のサービスに）機能getSkillを（変更解く：

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

そして.TSはこれにファイル：

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