Angular2 HTTP GET - Ответ отклика на полный объект

У меня есть этот простой компонент

import {Component} from 'angular2/core';
import {RouterLink, RouteParams} from 'angular2/router';
import {Http, Response, Headers} from 'angular2/http';
import {User} from '../../models/user';
import 'rxjs/add/operator/map';


@Component({
    template: `
        <h1>{{user.name}} {{user.surname}}</h1>
    `,
    directives: [RouterLink],
})
export class UserComponent {

    user: User;

    constructor(private routeParams: RouteParams,
        public http: Http) {
            this.user = new User();
            this.http.get('http://localhost:3000/user/' + this.routeParams.get('id'))
                .map((res: Response) => res.json())
                .subscribe((user: User) => this.user = user);
        console.log(this.user);
    }
}

Почему subscribe не отсылает ответ в полный объект User. Когда я регистрирую переменную User, моя консоль говорит User {_id: undefined, name: undefined, surname: undefined, email: undefined}. Но тем не менее привязка к .name и .surname в представлении работает.

Что здесь происходит? Где пользователь фактически хранит?

Ответы

Ответ 1

Здесь найдено решение: fooobar.com/questions/85478/...

Теперь мой метод выглядит следующим образом:

constructor(private routeParams: RouteParams,
    public http: Http) {
    this.user = new User();
    this.http.get('http://localhost:3000/user/' + this.routeParams.get('id'))
        .map((res: Response) => res.json())
        .subscribe((json: Object) => {
            this.user = new User().fromJSON(json);
        });
}

Я улучшил Serializable, вернув объект в конце, поэтому я могу оставить что-то вроде

var u = new User();
u.fromJSON(...);

и просто напишите

new User().fromJSON(json);

Serializable класс

export class Serializable {

    fromJSON(json) {
        for (var propName in json)
            this[propName] = json[propName];
        return this;
    }

}

Ответ 2

Хорошей практикой является использование данных из ответа GET с использованием

Observable<Model>

(относительно Angular документации https://angular.io/guide/http) поэтому...

//импорт

import {HttpClient} from "@angular/common/http";

//в списке параметров конструктора

private http: HttpClient

//метод службы

getUser(): Observable<User> {return this.http.get<User>({url}, {options});}

Вам больше не нужно ничего делать. Я считаю этот подход наиболее дружелюбным.