Setters & Getters 使用 Angular 的 HttpClient “映射”另一个返回未定义的属性答案

【问题标题】：Setters & Getters "Mapping" Another Property Returning Undefined Using Angular's HttpClientSetters & Getters 使用 Angular 的 HttpClient “映射”另一个返回未定义的属性
【发布时间】：2018-07-06 06:54:27
【问题描述】：

当从 Angular 的 (v5) HttpClient 检索时，我遇到了一些关于 setter 和 getter 的奇怪行为，它们在 TypeScript 中设置/返回对象的另一个公共属性。

以下是重要的结构：

export interface NamedEntity {
    id: number;
    name: string;
    priority?: number;
}

export Rule implements NamedEntity {
      ruleId: number;
      ruleName: string;
      //..other properties

      get id(): number {
          return this.ruleId;
      }
      set id(id: number){
           this.ruleId = id;
      }
      get name(): string {
          return this.ruleName;
      }
      set name(name: string){
           this.ruleName = name;
      }
}

//Another class that implements NamedEntity in the same way

我正在使用 HttpClient 检索 Rule 对象：

 return http.get<Rule[]>("my url");

订阅Observable<Rule> 时，我发现所有不是getter/setter 的属性在我的调试器和我的角度模板中都显示没有问题。但是，基于 setter/getter 的属性在调试器中始终显示为 undefined，在我的 Angular 模板上显示为空白。

我的 Angular 项目是使用 Angular-CLI 设置的，我的 tsconfig.json 的目标设置为“es5”。

这很可能是因为 HttpClient 将数据转换为由 TypeScript 生成的 Rule 接口的形状。我如何让 HttpClient 调用的结果对象成为具体的 Rule 类的实例，而不是它的隐式接口？

【问题讨论】：

标签： angular typescript getter-setter angular-httpclient

【解决方案1】：

我需要查看更多代码才能确定……但我猜您希望您的 http 请求返回一个 Rule 对象。它不是。相反，它返回的数据具有由 Rule 对象定义的属性。这意味着它没有任何对象的 getter、setter 或方法。

如果您的对象是一般扁平的（没有层次结构），您可以这样做：

x = Object.assign(new Rule(), rule);

rule 是从 Http 调用返回的值。

此代码创建一个新的 Rule 对象（然后具有 getter、setter 和方法）并将数据复制到其中。

【讨论】：

我有种感觉，HttpClient 只是将其强制转换为生成的接口 Rule 而不是类。如何让它创建实际具体类的实例，而不是生成的接口？（我会更新我的问题）