Angular 10中使用Js Joda格式化LocalDateTime遇错求助

首先，你遇到的核心问题是：后端传过来的data_start_act是普通JSON对象，而非@js-joda/core的LocalDateTime实例。这直接导致了两个现象：

1. 直接插值{{data_start_act}}显示[Object Object]——因为JS中对象默认的字符串表示就是这个；
2. 调用DateTimeFormatter时触发TypeError——格式化器需要操作真正的LocalDateTime实例，而普通JSON对象没有getLong这类专属方法。

下面是具体的解决思路和方案：

1. 先将JSON对象转换为LocalDateTime实例 #

这是让格式化器正常工作的前提，根据后端返回的结构，有两种转换方式：

方式A：基于拆分字段构造实例 #

如果后端返回的是拆分后的字段（比如{year:2024, month:5, dayOfMonth:15, hour:10, minute:30, second:0}），在组件/服务中拿到数据后手动构造实例：

import { LocalDateTime } from '@js-joda/core';

// 假设response是你从后端获取的数据
this.data_start_act = LocalDateTime.of(
  response.data.data_start_act.year,
  response.data.data_start_act.month,
  response.data.data_start_act.dayOfMonth,
  response.data.data_start_act.hour,
  response.data.data_start_act.minute,
  response.data.data_start_act.second
);

方式B：解析ISO格式字符串 #

如果后端能返回ISO标准的日期时间字符串（比如"2024-05-15T10:30:00"），可以直接用parse方法更简洁：

this.data_start_act = LocalDateTime.parse(response.data.data_start_act);

2. 使用DateTimeFormatter格式化显示 #

转换为实例后，就可以正常使用格式化器了：

• 在组件中定义格式化函数：

  import { DateTimeFormatter } from '@js-joda/core';
  
  // 自定义格式，可根据需求调整
  private dateFormatter = DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss');
  
  formatLocalDateTime(date: LocalDateTime): string {
    return date.format(this.dateFormatter);
  }
  

• 在HTML中调用：

  {{ formatLocalDateTime(data_start_act) }}
  

3. 无需格式化器的展示方式 #

如果不想依赖@js-joda/core的格式化器，有两种简单方案：

方案A：手动拼接字段（注意补零） #

直接访问对象的字段并拼接，需要处理月份、日期、时分秒的补零问题（比如5月要显示为05）：

• 组件中添加补零辅助函数：

  padZero(num: number): string {
    return num.toString().padStart(2, '0');
  }
  

• HTML中拼接：

  {{ data_start_act.year }}-{{ padZero(data_start_act.month) }}-{{ padZero(data_start_act.dayOfMonth) }} 
  {{ padZero(data_start_act.hour) }}:{{ padZero(data_start_act.minute) }}:{{ padZero(data_start_act.second) }}
  

方案B：用Angular内置DatePipe（需后端返回ISO字符串） #

如果后端能直接返回ISO格式的日期时间字符串（而非拆分的对象），可以直接用Angular自带的DatePipe，无需引入@js-joda：

<!-- 假设data_start_act是后端返回的ISO字符串，比如"2024-05-15T10:30:00" -->
{{ data_start_act | date:'yyyy-MM-dd HH:mm:ss' }}

注意：DatePipe依赖JS原生的Date对象，ISO字符串可以直接被它解析。

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