Angular中TypeScript类get属性调用返回undefined问题排查

问题场景 #

我在Angular项目里定义了MyModel类，包含trnMinDate、trnMaxDate两个字符串属性，还有对应的trnMinimumDate、trnMaximumDate get访问器。从API获取数据赋值给trnMinDate和trnMaxDate后，这两个字符串属性能正常打印，但调用get访问器得到的结果却是undefined。

MyModel类代码 #

export class MyModel {
trnMinDate: string | null = null;
trnMaxDate: string | null = null;

get trnMinimumDate(): Date | null{
  if (!this.trnMinDate) return null
    return new Date(this.trnMinDate);
  
}

get trnMaximumDate(): Date | null {
  if (!this.trnMaxDate) return null
  return new Date(this.trnMaxDate);
}
}

AppComponent代码 #

export class AppComponent implements OnInit{
  minDate: Date;
  maxDate: Date;       
  ngOnInit() 
   {
           const fetchDataFromApi$ = this._myService.getData();
           fetchDataFromApi$.subscribe({
                next: (data: MyModel ) => {
                     console.log('min-trn-date',data.trnMinDate)//value is logging
                     console.log('max-trn-date',data.trnMaxDate)//value is logging

                     this.minDate=data.trnMinimumDate;
                     this.maxDate=data.trnMaximumDate;

                     console.log('min-date-value',this.minDate)//value is logging as undefined
                     console.log('max-date-value',this.maxDate)//value is logging as undefined
                },
                error: (error) => {

                }
           })
   }
}

排查与解决方法 #

核心问题 #

你在订阅回调里把data标注为MyModel类型，这只是TypeScript的类型断言，实际API返回的是普通JSON对象，并没有成为MyModel的实例，所以类里定义的get访问器根本不会生效——普通对象上不存在这些get属性，自然返回undefined。

具体解决步骤 #

1. 手动创建MyModel实例并赋值
   在订阅回调里，先实例化MyModel，再把API返回的属性赋值到实例上：

   next: (rawData: any ) => {
     // 创建MyModel实例
     const data = new MyModel();
     // 将API返回的属性赋值给实例
     data.trnMinDate = rawData.trnMinDate;
     data.trnMaxDate = rawData.trnMaxDate;
   
     console.log('min-trn-date',data.trnMinDate);
     console.log('max-trn-date',data.trnMaxDate);
   
     this.minDate = data.trnMinimumDate;
     this.maxDate = data.trnMaximumDate;
   
     console.log('min-date-value',this.minDate);
     console.log('max-date-value',this.maxDate);
   }
   

2. 用静态工厂方法优化实例化（推荐）
   给MyModel添加一个静态方法，专门用来从JSON对象生成实例，代码更简洁可复用：

   export class MyModel {
     trnMinDate: string | null = null;
     trnMaxDate: string | null = null;
   
     get trnMinimumDate(): Date | null{
       if (!this.trnMinDate) return null
       return new Date(this.trnMinDate);
     }
   
     get trnMaximumDate(): Date | null {
       if (!this.trnMaxDate) return null
       return new Date(this.trnMaxDate);
     }
   
     // 新增静态工厂方法
     static fromJson(json: any): MyModel {
       const model = new MyModel();
       model.trnMinDate = json.trnMinDate ?? null;
       model.trnMaxDate = json.trnMaxDate ?? null;
       return model;
     }
   }
   

   然后在组件里调用这个方法：

   next: (rawData: any ) => {
     const data = MyModel.fromJson(rawData);
     // 后续代码同上
   }
   

3. 额外验证日期格式（可选）
   如果实例化后依然有问题，检查API返回的日期字符串是否符合Date构造函数的解析要求。可以打印验证：

   console.log('解析结果', new Date(data.trnMinDate).toString());
   

   如果显示Invalid Date，说明格式不兼容，建议用date-fns或moment.js这类库来解析日期。

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