Angular 2中如何将HTTP请求结果映射到自定义类？

嘿，作为Angular新手碰到这个问题太正常了——毕竟HTTP请求返回的只是普通的JS对象，不会自动变成你定义的User类实例。我给你几种实用的解决方法，结合你的代码来讲解：

方法1：手动逐个映射（最直观的入门方式） #

你可以在订阅HTTP响应的时候，遍历返回的原始用户数组，逐个创建User实例并通过setter赋值：

getValues(): void {
  this.usersService.getUsers().subscribe((rawUsers: any[]) => {
    // 把原始JS对象数组转换成User实例数组
    const userInstances: User[] = rawUsers.map(rawUser => {
      const user = new User();
      // 注意这里用你定义的大写setter（Id/Name/Surname）
      user.Id = rawUser.id;
      user.Name = rawUser.name;
      user.Surname = rawUser.surname;
      return user;
    });
    
    // 现在userInstances就是真正的User类实例数组了，随便用～
    console.log(userInstances);
    // 比如赋值给组件的属性，用于模板渲染
    // this.users = userInstances;
  });
}

方法2：给User类添加静态工厂方法（更优雅的写法） #

如果需要频繁转换，手动写赋值会很繁琐。可以给你的User类加一个静态方法，专门用来从JSON对象创建实例：

先修改你的User类：

export class User {
  private id: number;
  private name: string;
  private surname: string;

  // 新增：从JSON对象生成User实例的静态方法
  static fromJson(json: { id: number; name: string; surname: string }): User {
    const user = new User();
    user.Id = json.id;
    user.Name = json.name;
    user.Surname = json.surname;
    return user;
  }

  // 你的getter和setter保持不变
  get Id(): number { return this.id; }
  set Id(newId: number) { this.id = newId; }
  get Name(): string { return this.name; }
  set Name(newName: string) { this.name = newName; }
  get Surname(): string { return this.surname; }
  set Surname(newSurname: string) { this.surname = newSurname; }
}

然后在getValues里就可以简化成一行：

getValues(): void {
  this.usersService.getUsers().subscribe((rawUsers: any[]) => {
    const userInstances = rawUsers.map(User.fromJson);
    // 后续操作
  });
}

方法3：给User类添加构造函数（更灵活的方案） #

如果愿意调整User类的结构，添加支持JSON参数的构造函数会让转换更简洁：

修改User类：

export class User {
  private id: number;
  private name: string;
  private surname: string;

  // 重载构造函数：支持直接传参数，或者传JSON对象
  constructor(id: number, name: string, surname: string);
  constructor(json: { id: number; name: string; surname: string });
  constructor(idOrJson: number | { id: number; name: string; surname: string }, name?: string, surname?: string) {
    if (typeof idOrJson === 'object') {
      // 如果传入的是JSON对象，直接赋值
      this.id = idOrJson.id;
      this.name = idOrJson.name;
      this.surname = idOrJson.surname;
    } else {
      // 如果传入的是单独参数，按顺序赋值
      this.id = idOrJson;
      this.name = name!;
      this.surname = surname!;
    }
  }

  // 你的getter和setter保持不变
  get Id(): number { return this.id; }
  set Id(newId: number) { this.id = newId; }
  get Name(): string { return this.name; }
  set Name(newName: string) { this.name = newName; }
  get Surname(): string { return this.surname; }
  set Surname(newSurname: string) { this.surname = newSurname; }
}

这样转换的时候直接用new User()就行：

getValues(): void {
  this.usersService.getUsers().subscribe((rawUsers: any[]) => {
    const userInstances = rawUsers.map(raw => new User(raw));
    // 后续操作
  });
}

重要提醒 #

别用TypeScript的类型断言（比如rawUsers as User[]），这只是编译时的类型提示，运行时还是普通JS对象，不会有User类的方法和私有属性约束哦！

内容的提问来源于stack exchange，提问作者user8253442