Question

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

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

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

我正在尝试按照以下方式执行此操作：

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

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

您必须添加相同的方法＆＃39; fromJSON＆＃39;到了＆＃39; Group＆＃39; class，以便从json.groups创建一个新的Group对象。

使用HttpClient Angular将JSON映射到TypeScript类

2 个答案: