提问者:小点点

Angular2HTTPGET-将响应转换为完整对象


我有这个简单的组件

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

为什么订阅不将响应转换为完整的User对象。当我记录user变量时,我的控制台会说User{_id: un定义,name:un定义,surname:un定义,email:un定义}。但是在视图中绑定到.name.surname是有效的…

这里会发生什么?用户实际存储在哪里?


共3个答案

匿名用户

好的做法是使用GET响应中的数据

Observable<Model>

(关于角留档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对象转换为typescript类。