Angular HttpClient获取对象时Setter/Getter映射属性返回Undefined求助

我完全懂你踩的这个坑！你猜的没错——HttpClient.get<Rule[]>()里的<Rule[]>只是TypeScript给你的编译时“类型提示”，运行时它只是把后端返回的JSON直接转成了普通JavaScript对象，根本不是Rule类的实例。这就导致类里定义的getter/setter完全不起作用，因为普通对象没有这些方法，自然调试器里看id/name就是undefined，模板里也显示为空。

下面给你几个实用的解决办法，按推荐程度排序：

方法1：给Rule类添加构造函数，手动转换实例 #

这是最直接的方案，不需要额外依赖：

首先修改你的Rule类，添加一个接收普通对象的构造函数，用Object.assign把数据拷贝到类实例里：

export class Rule implements NamedEntity {
  ruleId: number;
  ruleName: string;
  // 其他属性...

  // 接收Partial<Rule>允许传入部分属性的对象
  constructor(data: Partial<Rule>) {
    // 把后端返回的普通对象属性拷贝到当前实例
    Object.assign(this, data);
  }

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

然后在发起请求时，用RxJS的map操作符把每个返回的普通对象转成Rule实例：

import { map } from 'rxjs/operators';

// ...
return this.http.get<Partial<Rule>[]>("my url").pipe(
  map(ruleList => ruleList.map(plainObj => new Rule(plainObj)))
);

这样订阅后拿到的就是真正的Rule类实例了，getter/setter就能正常工作，调试器和模板里的属性也能正确显示。

方法2：使用工厂函数转换（适合不想修改类构造的场景） #

如果不想给类加构造函数，可以写一个单独的工厂函数来创建实例：

export function createRule(data: Partial<Rule>): Rule {
  const rule = new Rule();
  Object.assign(rule, data);
  return rule;
}

然后在请求时同样用map：

return this.http.get<Partial<Rule>[]>("my url").pipe(
  map(ruleList => ruleList.map(createRule))
);

注意事项 #

如果你的Rule类里还有嵌套的自定义类对象（比如包含另一个NamedEntity实例），那你需要在构造函数或工厂函数里递归转换这些嵌套对象，否则它们还是普通对象，同样会有getter/setter失效的问题。

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