Angular中TypeScript Getter返回Undefined问题排查求助

问题出在Angular In-memory Web API返回的是普通JSON对象，而非你的User/Client类实例。类中定义的Email、Password getter是类的成员，普通JavaScript对象不具备这些访问器，所以调用时返回undefined；而直接访问email、password是因为JSON对象本身带有这些属性，自然能拿到值。

解决步骤 #

1. 给基类和子类添加支持对象初始化的构造器
   让类可以接收JSON对象数据，把属性赋值到实例上：

   // User基类
   export class User {
     public email: string;
     public password: string;
   
     get Email(): string {
       return this.email;
     }
   
     set Email(value: string) {
       this.email = value;
     }
   
     get Password(): string {
       return this.password;
     }
   
     set Password(value: string) {
       this.password = value;
     }
   
     // 支持传入部分属性初始化
     constructor(data?: Partial<User>) {
       if (data) {
         Object.assign(this, data);
       }
     }
   }
   
   // Client子类
   export class Client extends User {
     public clientId: number;
   
     constructor(data?: Partial<Client>) {
       super(data); // 先调用父类构造器
       if (data) {
         Object.assign(this, data); // 补充子类属性
       }
     }
   }
   

2. 在API请求后将JSON对象转为类实例
   在你的service方法中，获取到数据后用类的构造器创建实例：

   getClient(id: number): Observable<Client> {
     return this.http.get<Client>(`/api/clients/${id}`).pipe(
       map(rawData => new Client(rawData)) // 转换为Client类实例
     );
   }
   

3. 验证效果
   现在调用getClient获取到的是真正的Client实例，访问Email、Password getter就能正常返回值了。

补充说明 #

之前用构造器调用setter没解决问题，大概率是因为你没有先把JSON对象转为类实例就直接操作——普通对象根本没有这些setter方法，自然不会生效。必须先通过构造器创建类实例，类的访问器才能正常工作。

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