0

Web サイトの起動時に、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; }
}

私のコンポーネントでは、データを取得できるようにサービスを挿入します。

ホームアイコン:

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

ただし、AllDataService では、プロパティ (Exp、Edu、Skills...) が Response に存在しないというエラー メッセージが表示されます。開始時に必要なデータを取得し、すべてのコンポーネントがデータを確実に取得できるように、http サービスを正しくセットアップするにはどうすればよいですか? ありがとう

4

1 に答える 1

0

必要なことは、応答を 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>
        `,
于 2016-07-19T07:56:01.760 に答える