Angular 5：将 json 映射到类实例答案

【问题标题】：Angular 5: Map a json to a class instanceAngular 5：将 json 映射到类实例
【发布时间】：2018-04-02 16:05:43
【问题描述】：

我有一个通过以下方式定义为用户的类模型：

export class User {
    private code: string;

    get Code(): string {
        return this.code;
    }

    public setCode($code: string) {
        this.code = $code;
    }

在主要组件中，我有一个这样的部分：

export class AppComponent {
  title = 'app';
  private $user: User;


  constructor(private _http: HttpClient, private router: Router) {
    this.loadUser();
  }

  public loadUser(): void {
    this._http.post<User>(Global.url + '/user/show',
        {}).subscribe(
        data => {
          if (null !== data) {
            this.$user = data;
            console.log(this.$user);
          } else {
            this.router.navigate(['/login']);
            this.$user = null;
          }
        }
      );
  }

  public get User(): User {
    return this.$user;
  }
}

要打开的页面对用户进行查询，服务器以json格式返回代码，并应将其与用户类映射。这是它返回的内容：

{…}

code: "B1039"

...

__proto__: Object { … }

但是如果我尝试通过属性“console.log(this.$user.Code)”访问这些值，这就是返回给我的结果：

undefined

也就是说，虽然在我的 IDE 中，变量 data 是 User Class 类型，但是访问的方法不起作用。为什么返回的 json 没有转化为 User 对象？
我需要使用模型类而不是接口。

【问题讨论】：

标签： angular rest model httpclient

【解决方案1】：

你需要自己调用构造函数。铸造 <Something>data 不会为您调用它，它仅描述了 TS 编译器的数据应该是什么样的接口。因此，例如，您可以这样做：

this.user = Object.assign(new User(), data);

或者一种常见的方法是在类构造函数中进行相同的分配，因此您可以只使用new User(data)。

【讨论】：

我是通过以下方式完成的：constructor(data) { this.code = data.code; } 谢谢
Object.assign 是否在 ES5 中编译？
我不这么认为，如果你想支持旧的 IE，无论如何都要使用 polyfill。
或来自 lodash 的 defaults() 或 defaultsDeep() :)

【解决方案2】：

我更喜欢更安全的方法

export class AppComponent {
  private _user: User;

  constructor(private _http: HttpClient) {

  }

  getUser(): Observable<User>{
      return new Observable(observable => {

            if(!!this._user){
                observable.next(this._user);
                observable.complete();
            }
            else{
                 this._http.get<UserResponse>('...some....')
                    .map(this._mapUserResponse)
                    .subscribe((mapped:User) => {
                         this._user = mapped;

                         observable.next(this._user);
                         observable.complete();
                 }, err => {
                      observable.error();
                 });
            }

      });
  }

  private _mapUserResponse(response:UserResponse):User{
       if(!!response && !!response.foo){
            return new User(response.foo, response.bar);
       }
       return void 0;
  }

}

【讨论】：