如何在Angular中使用*ngIf比较计划日期与当前系统时间？

方法一：组件类中定义比较方法（推荐） #

这种方式逻辑清晰、便于维护，避免在模板中堆砌复杂表达式。

1. 组件类代码
   在组件内封装日期比较逻辑，处理从数据库获取的日期字符串：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 从数据库获取的计划日期字符串
  scheduledDate = "2022-08-06T10:11";

  // 判断计划日期是否在当前时间之后
  isFutureDate(): boolean {
    const scheduledTime = new Date(this.scheduledDate);
    const currentTime = new Date();
    // 可选：忽略秒和毫秒，仅比较到分钟级
    scheduledTime.setSeconds(0, 0);
    currentTime.setSeconds(0, 0);
    return scheduledTime > currentTime;
  }

  // 判断计划日期是否在当前时间之前
  isPastDate(): boolean {
    const scheduledTime = new Date(this.scheduledDate);
    const currentTime = new Date();
    scheduledTime.setSeconds(0, 0);
    currentTime.setSeconds(0, 0);
    return scheduledTime < currentTime;
  }
}

2. 模板中使用*ngIf
   在HTML模板里调用组件方法实现条件渲染：

<!-- 显示计划未到期的内容 -->
<div *ngIf="isFutureDate()">
  计划尚未执行，当前时间早于计划时间
</div>

<!-- 显示计划已过期的内容 -->
<div *ngIf="isPastDate()">
  计划已过期，当前时间晚于计划时间
</div>

<!-- 可选：显示计划刚好在当前分钟的内容 -->
<div *ngIf="!isFutureDate() && !isPastDate()">
  计划正在执行中
</div>

方法二：直接在模板中编写表达式（快速实现） #

如果逻辑简单，可直接在*ngIf中写日期比较表达式，但不推荐复杂场景使用：

<!-- 判断计划日期在未来 -->
<div *ngIf="new Date(scheduledDate) > new Date()">
  计划日期在未来
</div>

<!-- 判断计划日期已过去 -->
<div *ngIf="new Date(scheduledDate) < new Date()">
  计划日期已过期
</div>

注意事项 #

• 确保数据库返回的日期字符串是标准ISO格式（如示例中的YYYY-MM-DDTHH:mm），否则部分浏览器可能无法正确解析为Date对象。
• 如果需要更精确的时间对比（如忽略毫秒），建议在组件方法中统一处理时间对象，避免模板逻辑混乱。

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