Angular 2 Http GET 的问题

Question

我正在努力使用 Angular 2 执行 http 获取请求。我已经制作了一个包含我想用我的 TeacherInfo 类“获取”的 JSON 信息的文件，并使用它来显示帐户组件的信息，该组件是在路由中使用。

如果我点击这个元素的 routerLink 什么都不会显示，如果我切换到另一个 routerLink 则两者都没有（之前有，所有 routerLinks 都可以正常工作）

文件：TeacherInfo.service.ts

import {Injectable, OnInit} from '@angular/core';
import { Http, Response , Headers} from '@angular/http';
import { account } from '../components/account.component';
import {Observable} from "rxjs";
@Injectable()
export class TeacherInfo {


constructor ( private http : Http) {}

private url = '../test.json';

getInfo(){

    return this.http.get(this.url)
        .toPromise()
        .then(response => response.json().data as account );
}
}

文件：account.component.ts

import {Component, OnInit} from '@angular/core';
import { TeacherInfo } from '../services/TecherInfo.service';

@Component({
template:`
    <h2>This is not ready jet!</h2>
    <p>
        Willkommen {{name}}! <br/>
        E-mail: {{email}}<br/>
    </p>
    `
})

export class account implements OnInit{

public id : number;
public name : string;
public email: string;
private acc : account;

constructor(private accountinfoservice : TeacherInfo) {

}

getInfo() {
    this.accountinfoservice.getInfo()
        .then(( info : account )  => this.acc = info );

}

ngOnInit () {
    this.getInfo();
    if ( this.acc != null ) {
        this.id = this.acc.id;
        this.name = this.acc.name;
        this.email = this.acc.email;
    }else {
        console.log("there is no data! ");
    }
}

最后是 test.json：

{
"id" : "1",
"name": "testname",
"email": "testemail"
 }

我正在使用最新版本的 node 和 npm，并且在浏览器控制台中没有编译错误和无关的错误（其他 SPA 的部分尚未准备好）。存在可观察的实现是因为起初我尝试这样做，并得出结论，一开始使用 Promise 更容易。

Answer 1

我订阅了简单的 json 获取

调用代码

ngOnInit(): void {
   this._officerService.getOfficers()
    .subscribe(officers => this.officers = officers),
    error => this.errorMessage = <any> error;
}

和服务代码

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';

import { Officer } from '../shared/officer';

@Injectable()

export class OfficerService{

private _officerUrl = 'api/officers.json';

constructor(private _http: Http){   }

getOfficers() : Observable<Officer[]>{
    return this._http.get(this._officerUrl)
        .map((response: Response) => <Officer[]>response.json())
        .catch(this.handleError);
}

private handleError(error: Response){
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}

}

这会将数据作为数组返回并将其转换为正确的类型，尽管您也可以使用 any 并返回 [0] 如果您只是期望一个。

希望有帮助