角度2のHTTPサービスインジェクション可能

Question

ウェブサイトの起動時にAngular 2サービスを使用してサーバーから大きなオブジェクトを引き出しています。

{ 
    Edu: [...], 
    Exp: [...], 
    Links: [...], 
    Portfolio: [...], 
    Skills: [...] 
} 

そして、私はサービスをこのように設定します：

AllDataService：

import { Injectable, OnInit } from "@angular/core"; 
import { Http, Response } from "@angular/http"; 
import { Observable } from "rxjs/Rx"; 

@Injectable() 
export class AllDataService { 
    private allDataUrl = ".../allData"; 
    private loading: boolean; 
    private Edu: Array<any>; 
    private Exp: Array<any>; 
    private Links: Array<any>; 
    private Portfolio: Array<any>; 
    private Skills: Array<any>; 

    constructor(private http: Http) { 
    this.loading = true; 
    this.Edu = []; 
    this.Exp = []; 
    this.Links = []; 
    this.Portfolio = []; 
    this.Skills = []; 
    } 

    ngOnInit() { 
    this.getAllData(); 
    } 

    // Get data from api, aka "Set" methods 
    getAllData() { 
    return this.http.get(this.allDataUrl) 
      .subscribe(
       data => { 
       this.Edu = data.Edu; 
       this.Exp = data.Exp; 
       this.Links = data.Links; 
       this.Portfolio = data.Portfolio; 
       this.Skills = data.Skills; 
       this.loading = false; 
       }, 
       err => console.error(err) 
      ); 
    } 

    // “Get” methods 
    getLoading() { return this.loading; } 
    getEdu() { return this.Edu; } 
    getExp() { return this.Exp; } 
    getLinks() { return this.Links; } 
    getPortfolio() { return this.Portfolio; } 
    getSkills() { return this.Skills; } 
} 

そして、私のコンポーネントで、私はそのようにサービスを注入し、私はこのようなルックスを引くために必要なデータ

HomeIcons：

import { Component } from "@angular/core"; 
import { AllDataService } from "../allDataService"; 

@Component({ 
    selector: "home-icons", 
    template: ` 
      <div class="home-icons-wrapper"> 
       <ul class="home-icons-ul no-select"> 
       <li class="home-icons-li" 
       *ngFor="let link of links" > 
        <a href={{link.url}} target="_blank"> 
        <span class="home-icons-icon {{link.icon}}"></span> 
        </a> 
       </li> 
       </ul> 
      </div> 
      `, 
    providers: [AllDataService] 
}) 

export class HomeIcons { 
    public links; 

    constructor(private http: Http, private allDataService: AllDataService) { 
    this.links = allDataService.getLinks(); 
    } 
} 

私がデータを取得することができます210

しかし、AllDataServiceでは、プロパティ（Exp、Edu、Skills ...）がResponseに存在しないというエラーメッセージが表示されます。私が開始時に必要なデータを取得し、すべてのコンポーネントがデータを取得できるように、httpサービスを正しく設定するにはどうすればよいですか？おかげ

Answer 1

は、あなたがする必要があるのは、JavaScriptオブジェクトへのあなたの応答を変換することです：テンプレートでの直接法に

// Get data from api, aka "Set" methods 
getAllData() { 
    return this.http.get(this.allDataUrl) 
      .map(res => res.json()) // <-- this line here 
      .subscribe(
      data => { 
       this.Edu = data.Edu; 
       this.Exp = data.Exp; 
       this.Links = data.Links; 
       this.Portfolio = data.Portfolio; 
       this.Skills = data.Skills; 
       this.loading = false; 
      }, 
      err => console.error(err) 
      ); 
} 

バインド：

template: ` 
     <div class="home-icons-wrapper"> 
      <ul class="home-icons-ul no-select"> 
      <li class="home-icons-li" 
      *ngFor="let link of allDataService.getLinks()" > 
       <a href={{link.url}} target="_blank"> 
       <span class="home-icons-icon {{link.icon}}"></span> 
       </a> 
      </li> 
      </ul> 
     </div> 
     `,