使用 HttpClient Angular 将 JSON 映射到 TypeScript 类

Question

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

我不知道为什么这没有按预期工作，但似乎 HttpClient 无法将我的 json 映射到类。

我得到的错误是： test is not a function

我正在尝试这样做：

用户.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`);
  }
}

html:

<ng-container *ngIf="user | async; else loading; let user">
    {{user.test()}}
</ng-container>
<ng-template #loading>
    loading...
</ng-template>

控制器：

export class UserController implements OnInit {

    user: Observable<User>;

    constructor(private api: ApiService) {}

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

Answer 1

我最终在课堂上定义了这个：

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

这将正确映射值。

Answer 2

你可以做以下我的朋友：

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

}

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`).map(data => User.fromJSON(data.json()));
    }
}

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