0

当网站启动时，我正在使用 Angular 2 服务从我的服务器中提取一个大对象。我需要提取的数据如下所示：

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

我这样设置服务：

所有数据服务：

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...）。我应该如何正确设置我的 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 回答