Как делать get-запрос на angular 2?

Question

[tupoi]

Доброго времени суток, может кто-нибудь подсказать, что именно делаю не так?
Цель - отпарвка Get-запроса и вывод полученных данных на страницу.
Создаю json файл в папке

{
    "name": "Bob",
    "age": 28
}

для представления данных создаю файл user.ts

export class User {
  name: string;
  age: number;
}

пишу логику в сервисе

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class HttpService {

  constructor(private http: Http) { }

  getData() {
    return this.http.get('./user.json')
  }
}

Вызываю все в компоненте

import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { HttpService } from './http.service';
import { User } from './user';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [HttpService]
})
export class AppComponent implements OnInit {

  user: User;
  constructor(private httpService: HttpService) { }

  ngOnInit() {
    this.httpService.getData()
      .subscribe((data: Response) => this.user=data.json());
  }
}

<div>
  <p>Имя пользователя: {{user?.name}}</p>
  <p>Возраст: {{user?.age}}</p>
</div>

В итоге на странице только "Имя пользователя:" и все, будто значения не пришли, может кто-нибудь подсказать, что именно не так делаю?

Answer 1

[Даша Циклаури]

проверяй отладчиком браузера приходят ли данные по запросу на './user.json' может закешировалось
и на будущее, такие вызовы лучше писать так
return this.http.get('./user.json').first()
чтобы производилась отписка сразу, иначе висячие сабскрайберы образуются.
или уже внутри компонента

this.subscriptions.push(this....subscribe())

ngOnDestroy(){
this.subscriptions.forEach(i=>i.unsubscribe())
}

Comments

[Артем]

return this.http.get('./user.json')

Это Observer и после того как запрос выполнился обсервер комплитися

[Даша Циклаури]

Артем: Точно, спасибо!