Angular中如何通过ngIf直接比较两个日期并控制元素显示？

你遇到的问题是Date对象和字符串日期直接比较导致判断失效——today是Date类型，而item.tabela.vPromoData是字符串类型，JavaScript中不同类型的比较逻辑不符合预期，所以*ngIf的条件判断无法正常工作。

下面是几种可行的解决方式：

方式一：预处理数据，将字符串日期转为Date对象 #

在获取到数据后，把每个item中的vPromoData转换为Date类型：

// 假设数据是从接口获取，在回调中处理
this.yourApiService.getData().subscribe(items => {
  this.items = items.map(item => {
    if (item.tabela?.vPromoData) {
      // 转换字符串为Date对象
      item.tabela.vPromoData = new Date(item.tabela.vPromoData);
    }
    return item;
  });
});

// 同时记得把today的时分秒清零，避免当天日期因时分秒导致判断偏差
public today = new Date();
this.today.setHours(0, 0, 0, 0);

模板中直接使用日期比较：

<div *ngIf="item.tabela.vPromo && today < item.tabela.vPromoData">
  {{ item.tabela.vPromoData | date:'yyyy-MM-dd' }}
</div>

方式二：使用自定义管道转换日期字符串 #

创建一个管道用于将字符串转为Date对象：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'toDate' })
export class ToDatePipe implements PipeTransform {
  transform(value: string): Date | null {
    return value ? new Date(value) : null;
  }
}

在你的模块中声明这个管道，然后在模板中使用：

<div *ngIf="item.tabela.vPromo && today < (item.tabela.vPromoData | toDate)">
  {{ item.tabela.vPromoData | date:'yyyy-MM-dd' }}
</div>

方式三：在组件中写比较方法 #

在组件内添加一个判断促销日期是否有效的方法：

public today = new Date();
constructor() {
  // 清零时分秒，确保日期比较的准确性
  this.today.setHours(0, 0, 0, 0);
}

isPromoValid(promoDateStr: string): boolean {
  const promoDate = new Date(promoDateStr);
  promoDate.setHours(0, 0, 0, 0);
  return promoDate > this.today;
}

模板中调用该方法：

<div *ngIf="item.tabela.vPromo && isPromoValid(item.tabela.vPromoData)">
  {{ item.tabela.vPromoData | date:'yyyy-MM-dd' }}
</div>

关键注意点 #

• 一定要处理today的时分秒，否则如果当前时间是当天的某个时刻，会和当天0点的促销日期产生误判（比如今天是2022-09-25 10:00，促销日期是2022-09-25，直接比较会认为today > promoDate，导致div隐藏，但实际需求可能是当天仍显示）。
• 确保item.tabela.vPromoData的字符串格式是浏览器能正确解析的日期格式（比如YYYY-MM-DD）。

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