时间戳

首页 > 解决方案 > 在Angular HTTP中自动映射后如何调用对象中的方法？

angular - 在Angular HTTP中自动映射后如何调用对象中的方法？

问题描述

我有模型User：

export class User {
   id: number;
   roles: Role[];

   hasRole(role: string) { return true; }
}

在我的用户服务中，我使用泛型将响应映射到该模型。

getById(id: number) {
   return this.http.get<User>(`/api/v1/admin/users/${id}`);
}

然后在组件中，我试图调用hasRole方法：

ngOnInit() {
    this.userService.getById(1).subscribe(data => this.user = data);
}

checkRole() {
   return this.user.hasRole();
}

打电话后，checkRole我收到消息：

TypeError: this.user.hasRole is not a function。

我该如何解决？

标签： angulartypescript

解决方案

当您将类型参数传递给get您时，实际上并没有改变get内部所做的事情，即从服务器获取数据并将其解析为对象（JSON.parse最有可能使用）。传递参数的原因是要对来自服务器的对象进行类型化，但该对象实际上不会是类的实例，它仍然是一个简单的对象。为避免这种混淆，您可以使用仅包含字段作为类型参数的接口，并创建Userin的实例subscribe

this.userService.getById(1).subscribe(data => this.user = Object.assign(new User(),  data));

或者更安全的方式，确保没有人认为从返回的数据getById是一个实际的实例User：

type DataKeys<T> = { [P in keyof T] : T[P] extends Function ? never : P }[keyof T]
type Data<T> = Pick<T, DataKeys<T>>; 


getById(id: number) {
   return this.http.get<Data<User>>(`/api/v1/admin/users/${id}`);
}

this.userService.getById(1).subscribe(data => this.user = Object.assign(new User(),  data));

推荐阅读