Angular HttpClient 映射从目标对象中删除 getter

Question

我正在使用 HttpClient 从 API 获取 Json，并使用该 HttpClient 的 autoMapping 将 json 映射到目标对象，如下所示：

this.httpClient.post<Person>(url, body, { headers: headers, params: httpParams }).retry(ConfigurationService.apiHttpRetries)

我的问题是我的 Person 类包含如下吸气剂：

get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }

在 httpClient.Post 之后，我得到一个 Person 对象，该对象仅包含从 json 返回的字段，而不包含其他属性，并且没有我的 FullName getter。

我尝试使用 Object.Assign 但它也无法正常工作...

如果 httpClient.post 通用方法不做 map 而只做类似 return JSON.parse(jsonResult) 之类的事情，那么它有什么大不了的？

Answer 1

泛型参数仅用于在编译时键入。您通知其余代码从响应返回的对象将与Person 兼容。如果响应不包含 firstName 或 lastName 属性，除非您自己检查对象形状，否则您的代码仍然无法正常工作。如果您希望该对象具有方法或其他 getter，则必须自己实例化它。

interface PersonResponse {
  firstName: string;
  lastName: string;
}

this.httpClient.post<Person>(url, body, headers).pipe(
  retry(ConfigurationService.apiHttpRetries),
  map(personProperties => new Person(personProperties),
);

所以你可以拥有

class Person {
  constructor({ firstName, lastName }) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
}

Answer 2

类构造函数中的Object.assign()：

 class Person {
     firstName: string;
     lastName: string;;
         constructor(data: Object|Person) {
            Object.assign(this,data);
         }
      get FullName() { return `${this.firstName} + ' ' ${this.lastName}`; }
    }

    ...

        this.httpClient.post<Person>(url, body, headers).pipe(
              retry(ConfigurationService.apiHttpRetries),
              map(personProperties => new Person(personProperties),
       );

不需要自己映射每个属性：

this.firstName = firstName;
this.lastName = lastName;