JHipster模板中获取当前日期并与数据库日期对比的问题

首先得明确：Angular的模板表达式不允许直接使用new操作符或调用类构造函数，这就是你写{{ new Date() }}会抛出模板解析错误的核心原因——模板的表达式上下文只能访问组件实例上的属性和方法，不能直接执行类构造逻辑。

下面是适配你JHipster项目场景的具体解决方案：

1. 在组件类中定义当前日期属性 #

打开myclass.component.ts，在组件类里添加当前日期的属性（按需选择静态或动态更新的方式）：

方式一：静态初始化（适合不需要实时刷新的场景） #

export class MyclassComponent implements OnInit {
  // 保留你已有的其他属性
  currentDate = new Date();

  // 保留你已有的其他方法
}

方式二：动态更新（如果需要实时刷新当前时间） #

export class MyclassComponent implements OnInit, OnDestroy {
  // 保留你已有的其他属性
  currentDate = new Date();
  private dateUpdateTimer?: number;

  ngOnInit(): void {
    // 每1分钟刷新一次当前日期（可根据需求调整间隔）
    this.dateUpdateTimer = window.setInterval(() => {
      this.currentDate = new Date();
    }, 60000);
  }

  ngOnDestroy(): void {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.dateUpdateTimer) {
      clearInterval(this.dateUpdateTimer);
    }
  }

  // 保留你已有的其他方法
}

2. 转换数据库日期为Date对象 #

从数据库读取的日期通常是字符串格式（比如2020-12-12），直接和Date对象对比会出错，所以要在组件获取数据时完成格式转换。

找到你获取myclasses数据的代码（一般是调用service的query()方法），修改为：

this.myclassService.query().subscribe({
  next: (data) => {
    this.myclasses = data.body?.map(item => {
      // 把`targetDate`替换成你实际的日期字段名
      item.targetDate = new Date(item.targetDate);
      return item;
    }) || [];
  },
  error: (err) => {
    // 保留你已有的错误处理逻辑
  }
});

3. 在模板中实现日期对比与显示 #

现在可以在myclass.component.html里安全使用组件的currentDate属性，同时完成日期对比逻辑：

<tbody>
  <tr *ngFor="let myclasse of myclasses ;trackBy: trackId">
    <td>{{myclasse?.id}}</td>
    <!-- 格式化显示数据库日期 -->
    <td>{{ myclasse.targetDate | date:'yyyy-MM-dd' }}</td>
    <!-- 显示当前日期 -->
    <td>{{ currentDate | date:'yyyy-MM-dd' }}</td>
    <!-- 根据日期对比结果显示状态 -->
    <td>
      <span *ngIf="myclasse.targetDate > currentDate" class="text-primary">
        未过期
      </span>
      <span *ngIf="myclasse.targetDate <= currentDate" class="text-danger">
        已过期
      </span>
    </td>
  </tr>
</tbody>

补充说明 #

• Angular模板表达式还有其他限制：不能使用typeof、instanceof，也不能直接调用带参数的方法（除非是组件实例上的方法，且参数来自模板上下文）。
• 如果涉及跨时区场景，建议把日期统一转换为UTC格式后再对比，避免时区差异导致的判断错误。

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