Javascript 使用HttpClient将JSON映射到TypeScript类

我希望使用HttpClient进行API调用，并将响应映射到和类（而不是接口），我希望该类具有某些方法，我可以在HTML视图中扩展和稍后调用这些方法

我不知道这为什么不能像预期的那样工作，但HttpClient似乎不可能将我的json映射到类

我得到的错误是：

测试不是一项功能

我试着按照以下方式来做：

User.ts

export class User {
  id: number;
  first_name: string;
  last_name: string;
  groups: Group[];

  test() {
    return 'test';
  }
}

Api.Service.ts

export class ApiService {

  private base_url: String = environment.api;

  constructor(private http: HttpClient) { }

  public me() {
    return this.http.get<User>(this.base_url + `user/me`);
  }
}

导出类API服务{
private base_url:String=environment.api；
构造函数（私有http:HttpClient）{}
公共me（）{
返回this.http.get（this.base_url+`user/me`）；
}
}

html:

{{user.test（）}}
加载。。。

控制器：

export class UserController implements OnInit {

    user: Observable<User>;

    constructor(private api: ApiService) {}

    ngOnInit() {
        this.user = this.api.me()
    }
}

导出类UserController实现OnInit{
用户：可观察；
构造函数（私有api:ApiService）{}
恩戈尼尼特（）{
this.user=this.api.me（）
}
}

我的朋友，你可以做以下几件事：

export class User {
id: number;
first_name: string;
last_name: string;
groups: Group[];

test() {
  return 'test';
}

static fromJSON(json) {
    const user: User = new User();
    user.id = json.id;
    user.first_name = json.first_name;
    user.last_name = json.last_name;
    user.groups = [];

    json.groups.forEach(group => {
        user.groups.push(Group.fromJSON(group));
    });

    return user;
}

}

导出类API服务{
private base_url:String=environment.api；
构造函数（私有http:HttpClient）{}
公共me（）{
返回this.http.get（this.base_url+`user/me`）.map（data=>user.fromJSON（data.json（））；
}
}

---

您必须将相同的方法“fromJSON”添加到“Group”类中，以便从json.groups创建新的Group对象。

您可以执行以下操作：

export class User {
id: number;
first_name: string;
last_name: string;
groups: Group[];

test() {
  return 'test';
}

static fromJSON(json) {
    const user: User = new User();
    user.id = json.id;
    user.first_name = json.first_name;
    user.last_name = json.last_name;
    user.groups = [];

    json.groups.forEach(group => {
        user.groups.push(Group.fromJSON(group));
    });

    return user;
}

}

导出类API服务{
private base_url:String=environment.api；
构造函数（私有http:HttpClient）{}
公共me（）{
返回this.http.get（this.base_url+`user/me`）.map（data=>user.fromJSON（data.json（））；
}
}

---

您必须将相同的方法“fromJSON”添加到“Group”类中，以便从json.groups创建新的Group对象。

我在类中定义了这个：

static fromJSON(data: any) {
    return Object.assign(new this, data);
}

---

这将正确映射值。

我在我的类中定义了：

static fromJSON(data: any) {
    return Object.assign(new this, data);
}

---

这将正确映射值。

可能重复的可能重复我正在使用Angular的新HttpClient，它不再支持.json（），除此之外，我正在使用

http.get

，因此响应将自动映射到类的结构。但问题是HttpClient没有创建类（可能是因为JavaScript运行时）。我使用Angular的新HttpClient，它不再支持.json（），此外，我使用的是

http.get

，因此响应会自动映射到类的结构。但问题是HttpClient没有创建类（可能是因为JavaScript运行时）。