Angular组件循环内日期比较：如何判断提交日期大于当前日期

你的代码存在两个核心问题：数组定义语法错误和日期字符串无法直接正确比较，以下是修复后的完整方案：

1. 修正数组定义 #

当前List的写法存在语法错误，需改为包含多个对象的数组，每个对象拥有submissiondate属性：

// 组件.ts文件中
this.List = [
  { submissiondate: "14-Feb-2023" },
  { submissiondate: "15-Feb-2023" },
  { submissiondate: "17-Feb-2023" }
];

2. 统一日期格式并转为Date对象 #

直接用字符串比较日期会因格式不匹配（dd-MMM-yyyy vs yyyy-MM-dd）导致结果错误，需将所有日期转为Date对象再比较：

// 组件.ts文件中
import { formatDate } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  // ...组件元数据
})
export class YourComponent {
  List: Array<{ submissiondate: string }> = [];
  currentDate: Date;

  constructor() {
    // 初始化数据
    this.List = [
      { submissiondate: "14-Feb-2023" },
      { submissiondate: "15-Feb-2023" },
      { submissiondate: "17-Feb-2023" }
    ];

    // 按指定时区生成当前日期的Date对象
    const currentDateStr = formatDate(new Date(), 'yyyy-MM-dd', 'en-US', '+0530');
    this.currentDate = new Date(currentDateStr);
  }

  // 提前将列表中的日期转为Date对象，避免模板中重复转换影响性能
  get processedList() {
    return this.List.map(item => ({
      ...item,
      submissionDateObj: new Date(item.submissiondate)
    }));
  }
}

3. 模板中正确比较日期 #

使用预处理后的Date对象进行比较：

<!-- 组件.html文件中 -->
<div *ngFor="let label of processedList">
  <span *ngIf="label.submissionDateObj > currentDate">Passed</span>
</div>

注意事项 #

• 若submissiondate的字符串格式无法被Date构造函数正确解析，可使用date-fns等日期处理库辅助解析
• 确保列表中的日期与currentDate时区一致，避免因时区偏差导致比较结果错误

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