Проблемы с Угловым 2 Http GET

Question

Я изо всех сил пытаюсь выполнить запрос http с угловым 2. Я создал файл с информацией Json, который я хочу «получить» с моим классом TeacherInfo и использовать его для отображения информации компонентом учетной записи, который используется в маршрутизации. Если для этого элемента ничего я нажимаю на 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" 
} 

Я использую последние версии узла и npm, и я не вижу ошибок компиляции и несвязанных ошибок в консоли браузера (другие части СПА, которые не являются готовыми к эксплуатации). Наблюдаемые реализации есть, потому что сначала я пытался сделать это таким образом и пришел к выводу, что сначала легче использовать обещание.

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

}

Это возвращает данные в виде массива и приведения его в правильный тип, хотя вы также можете использовать любой и возвращать [0], если вы просто expec т.

Надеюсь, что поможет