Angular - 在 HTTP 请求中发送部分数据模型的最佳方法答案

【问题标题】：Angular - Best approach for sending partial data model in HTTP requestAngular - 在 HTTP 请求中发送部分数据模型的最佳方法
【发布时间】：2019-11-17 07:41:47
【问题描述】：

服务器返回一个用户对象作为响应

{ 
  name: "some_name",
  age: 30
}

我将为 User 对象创建一个类，但该类还有其他属性，我只在客户端需要这些属性

class User {
  public color: string = "red"
  constructor(public name: string, public age: number) {}
}

我只会在客户端使用颜色属性。

现在客户端和服务器的用户类型不同了。

如果我想在请求方法中将没有颜色属性的用户 obj 发送回服务器

我应该从用户创建一个新的类对象吗？

class UserRequest {
constructor(public name: string, public age: number) {}
}

let userRequest = new UserRequest(user.name, user.age);

只创建没有类型的新对象？

let userRequest = {
  name: user.name,
  age: user.age
}

这里我只有2个属性，如果我有更多，这可行吗？

假设如果我必须发送一个用户列表，那么迭代所有用户对象创建一个新对象将增加复杂性。

当类型不同时，最好的方法是什么？

【问题讨论】：

你可以键入东西而不需要构造一个对象，只需要创建一个UserRequest接口。

标签： javascript angular typescript casting typescript-typings

【解决方案1】：

this.http.post<ServerModel>({ serverModel.prop1: clientModel.prop1, serverModel.prop2: clientModel.prop2 });

如果您需要在多个位置创建服务器模型，您可以将其包装在一个函数中。看到你在使用类，你可以有一个名为 toServerModel 的方法，但 Angular 标准是使用数据模型的接口，而不是类。

【讨论】：

【解决方案2】：

您可以在 User 类中定义一个新函数，该函数将只返回数据库字段，或者通过定义一个仅包含需要发送到服务器的字段的 dbFields 数组来使其更通用：

class User {
  public color: string = "red";
  private dbFields = ['name', 'age'];
  constructor(public name: string, public age: number) {}

  getUserData(){
    let data = {};
    for(const field of this.dbFields)
      data[field]=this[field];
    return data;
  }
}

然后你可以简单地调用user.getUserData()，它会返回一个只有name和age的对象

您还可以通过定义Model 类使其更通用，并在其他模型中使用该函数：

class Model {
  constructor(protected dbFields: string[]) {}

  getDatabaseData(){
    let data = {};
    for(const field of this.dbFields)
      data[field]=this[field];
    return data;
  }
}

class User extends Model {
  public color: string = "red";
  constructor(public name: string, public age: number) {
    super(['name', 'age']);
  }
}

当你想发送请求时，你调用user.getDatabaseData()。

如果您有更多字段，您只需向dbFields 数组添加更多值。如果你有一个用户数组，你可以map它到一个数据库数据数组：

const usersData = users.map((user: User)=>user.getDatabaseData());

【讨论】：