Angular与Spring Boot交互时日期格式引发dataHora属性undefined问题

这个问题的核心原因是Spring Boot返回的日期格式和Angular默认处理的ISO格式存在细微差异，导致Angular无法自动将字符串转换为Date类型，最终映射到Rac类的dataHora属性时出现undefined。

为什么会出现这个问题？ #

你发送的日期是标准ISO 8601格式（2018-05-15T19:00:00.000Z），但Spring Boot返回的是2018-05-15T19:00:00.000+0000——虽然这两种格式都表示UTC时间，但Angular的HttpClient默认不会自动将+0000后缀的字符串转换为Date对象。加上TypeScript的类定义只是编译时类型检查，运行时返回的是普通JSON对象，不会自动帮你完成类型转换，所以最终dataHora会因为类型不匹配或解析失败变成undefined。

两种可行的解决方案 #

方案一：在Spring Boot端统一返回标准ISO格式（推荐）

从根源上解决问题，让Spring Boot返回带Z后缀的标准UTC日期格式，这样Angular可以直接识别为Date对象。

1. 全局配置（通过application.properties）
   在Spring Boot的配置文件中添加以下配置：

   # 禁用时间戳序列化，返回字符串格式
   spring.jackson.serialization.write-dates-as-timestamps=false
   # 设置时区为UTC
   spring.jackson.time-zone=UTC
   # 指定日期格式为带Z的ISO标准
   spring.jackson.date-format=yyyy-MM-dd'T'HH:mm:ss.SSS'Z'
   

2. 局部字段配置（通过注解）
   如果只需要针对某个字段调整格式，可以在实体类的日期字段上添加@JsonFormat注解：

   import com.fasterxml.jackson.annotation.JsonFormat;
   import java.time.LocalDateTime;
   
   public class Rac {
       private Long idRac;
       
       @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", timezone = "UTC")
       private LocalDateTime dataHora;
       
       private String historico;
       // getter和setter省略
   }
   

方案二：在Angular端手动转换日期格式

如果无法修改Spring Boot的配置，可以在Angular端对返回的日期字符串进行转换，确保赋值给Date类型的属性。

1. 手动转换单个对象
   修改你的carregaRac方法，在获取到数据后手动将日期字符串转为Date对象：

   carregaRac() {
     this.racService.buscarPorCodigo(this.idRac)
       .then(rac => {
         // 手动转换日期字符串为Date对象
         rac.dataHora = rac.dataHora ? new Date(rac.dataHora) : null;
         this.rac = rac;
         this.formulario.patchValue({
           dataHora: this.rac.dataHora,
           historico: this.rac.historico,
         })
       })
       .catch(erro => this.errorHandler.handle(erro));
   }
   

2. 使用工厂方法创建类实例
   为Rac类添加一个静态工厂方法，专门处理JSON到类实例的转换，确保日期字段被正确解析：

   export class Rac { 
     idRac: number; 
     dataHora: Date; 
     historico: string; 
   
     static fromJson(json: any): Rac {
       const rac = new Rac();
       rac.idRac = json.idRac;
       // 安全转换日期字符串
       rac.dataHora = json.dataHora ? new Date(json.dataHora) : null;
       rac.historico = json.historico;
       return rac;
     }
   }
   

   然后在调用服务时使用这个方法：

   carregaRac() {
     this.racService.buscarPorCodigo(this.idRac)
       .then(racJson => {
         this.rac = Rac.fromJson(racJson);
         this.formulario.patchValue({
           dataHora: this.rac.dataHora,
           historico: this.rac.historico,
         })
       })
       .catch(erro => this.errorHandler.handle(erro));
   }
   

3. 全局拦截器统一处理所有日期
   如果你的应用中有很多日期字段需要处理，可以创建一个HttpInterceptor，自动将响应中的日期字符串转换为Date对象：

   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { map } from 'rxjs/operators';
   
   @Injectable()
   export class DateInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       return next.handle(req).pipe(
         map(event => {
           // 仅处理成功的响应
           if (event.type === 4 && event.body) {
             this.convertDates(event.body);
           }
           return event;
         })
       );
     }
   
     private convertDates(obj: any): void {
       for (const key in obj) {
         if (obj.hasOwnProperty(key)) {
           const value = obj[key];
           // 匹配Spring Boot返回的日期格式
           if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}[+-]\d{4}$/.test(value)) {
             obj[key] = new Date(value);
           } else if (typeof value === 'object' && value !== null) {
             // 递归处理嵌套对象
             this.convertDates(value);
           }
         }
       }
     }
   }
   

   最后在app.module.ts中注册这个拦截器：

   import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { DateInterceptor } from './date.interceptor';
   
   @NgModule({
     // ...其他配置
     providers: [
       { provide: HTTP_INTERCEPTORS, useClass: DateInterceptor, multi: true }
     ]
   })
   export class AppModule { }
   

内容的提问来源于stack exchange，提问作者Murilo Góes de Almeida