我不能在 Angular 的 httpclient 结果中使用 getter 和 setter 吗？答案

【问题标题】：Can't I use getters and setters in an Angular's httpclient result?我不能在 Angular 的 httpclient 结果中使用 getter 和 setter 吗？
【发布时间】：2020-04-27 15:50:51
【问题描述】：

在我的 Angular 项目中，我有一个从后端返回 User 类的方法：

export class User {
  id: string;
  name: string;
  my_list: Array<string>;

  get otherNameForMyList() : Array<string> {
    return this.my_list;
  }

  set otherNameForMyList(newList  : Array<string>) {
    this.my_list = newList;
  }
}

所以我这样调用后端：

export class UserService {    
  getUserFromBE(login: string): Observable<User> {
    return this.http
      .get<User>(`${environment.apiUrl}/user/${login}`)
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }
}

但是当我调用此方法并订阅结果时，我不能使用 otherNameForMyList：

let user = new User();
userService.getUserFromBE('mylogin').subscribe(async (u : User)=>{
  console.log(u.otherNameForMyList); // undefined
}

但是，如果我这样做，它会起作用：

let user = new User();
userService.getUserFromBE('mylogin').subscribe(async (u : User)=>{
  console.log(u.my_list); // ok result
}

console.log(u) 也返回 Object 类型，而不是应有的 User 类型。

现在，如果我在 getUserFromBE 中将 httpclient 调用的结果类型声明为“：Observable”，那么你不应该是用户类型吗？我可以强迫它吗？

显然 api 只返回 my_list 字段。

谁能解释一下为什么 u 是 Object 而不是 User ？

谢谢

【问题讨论】：

标签： javascript angular typescript observable

【解决方案1】：

HttpClient 上的泛型方法将对反序列化的 json 结果使用类型断言。示例：.get<User> 仍会返回一个对象，但现在可以在静态代码中使用类型断言将返回的实例视为 User。它确实不意味着返回的实例是User类型。

如果您想要User 的实际实例，您应该使用map 并创建User 的实例以返回给调用者。

例子：

export class UserService {    
  getUserFromBE(login: string): Observable<User> {
    return this.http
      .get<{id:string;name:string;my_list:Array<string>}>(`${environment.apiUrl}/user/${login}`)
      .pipe(map(user => {
        var result = new User();
        result.id = user.id;
        result.name = user.name;
        result.my_list = user.my_list;
        return result;
      }),catchError(this.processHTTPMsgService.handleError));
  }
}

【讨论】：