Question

我有一个以下列方式定义为User的类模型：

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格式返回代码，并将其映射到User Class。这就是它的回报：

{…}

code: "B1039"

...

__proto__: Object { … }

但是如果我尝试通过属性“console.log（this。$ user.Code）”访问这些值，那么这就是我的回报：

undefined

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

Answer 1

您需要自己调用构造函数。转换<Something>data不会为您调用它，它只描述TS编译器哪个接口应该是这样的接口。例如，你可以这样做：

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

或者常见的方法是在类构造函数中进行相同的赋值，因此您只需new User(data)。

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

}

Angular 5：将json映射到类实例

2 个答案: