typescript - cast - Angular2 HTTP GET-Convertir la respuesta en un objeto completo

httpclient angular 5 example

Question

Tengo este componente simple

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

¿Por qué subscribe no convierte la respuesta en un objeto User completo? Cuando estoy registrando la variable de user , mi consola dice User {_id: undefined, name: undefined, surname: undefined, email: undefined} . Sin embargo, el enlace a .name y .surname en la vista está funcionando ...

¿Qué pasa aquí? ¿Dónde se almacena realmente el usuario?

Answer 1

Encontró una solución aquí: https://.com/a/29759472/2854890

Mi método ahora se ve así:

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

Mejoré el Serializable devolviendo el objeto al final, para poder omitir algo como

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

y solo escribe

new User().fromJSON(json);

Clase Serializable

export class Serializable {

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

}

Answer 2

Eso no es compatible con TypeScript.

Consulte Cómo emitir un objeto JSON a una clase de escritura de tipos para obtener más detalles.

Answer 3

Una buena práctica es consumir datos de la respuesta GET usando

Observable<Model>

(con respecto a la documentación angular https://angular.io/guide/http ) así que ...

// importaciones

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

// en la lista de parámetros del constructor

private http: HttpClient

// método de servicio

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

No necesitas hacer nada más. Considero este enfoque como el más amigable.