Angular2 HTTP GET - 응답을 전체 개체로 캐스트

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작동하고 있는 것으로 표시됩니다.

여기서 무슨 일이 일어날까요?사용자는 실제로 어디에 저장됩니까?

모범 사례는 다음을 사용하여 GET 응답의 데이터를 소비하는 것입니다.

Observable<Model>

(Angular documentation https://angular.io/guide/http) 을 참조하십시오. 그래서...

수입품

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

생성자 매개 변수 목록에서

private http: HttpClient

서비스 방식

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

당신은 더 이상 아무것도 할 필요가 없습니다.저는 이 접근법이 가장 우호적이라고 생각합니다.

다음 사이트에서 솔루션을 찾을 수 있습니다. https://stackoverflow.com/a/29759472/2854890

이제 내 방법은 다음과 같습니다.

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

}

TypeScript에서는 지원되지 않습니다.

자세한 내용은 JSON 개체를 유형 스크립트 클래스에 캐스팅하는 방법을 참조하십시오.

언급URL : https://stackoverflow.com/questions/36014161/angular2-http-get-cast-response-into-full-object