我有这个简单的组件
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是有效的…
这里会发生什么？用户实际存储在哪里？
好的做法是使用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类。
