Angular组件模板中如何判断日期是否等于今日日期

完全可以直接在组件模板内完成日期对比判断，你当前的代码存在几个语法和逻辑问题，修正后即可正常运行。

原有代码的核心问题 #

• 结构指令语法错误：*ngIf必须附着在真实DOM元素或<ng-container>节点上，你写的<*ngIf="...">是无效语法，无法通过Angular编译
• 变量作用域问题：如果todaysDate是方法内部用const声明的局部变量，模板无法访问，必须将其定义为组件类的公开属性
• 对比逻辑问题：直接拿未格式化的news.Date（可能是Date对象、时间戳、带时分秒的日期字符串）和格式化为yyyy.MM.dd的todaysDate做全等对比，格式/类型不匹配会导致判断永远不成立

正确实现代码 #

1. 组件类代码调整 #

将todaysDate声明为组件类属性，确保模板可访问：

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

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html'
})
export class NewsListComponent {
  // 新闻列表数据
  data: any[] = [];
  // 今日日期格式化为yyyy.MM.dd字符串，定义为类属性供模板访问
  todaysDate = formatDate(new Date(), 'yyyy.MM.dd', 'en');
}

2. 模板代码修正 #

在模板中用日期管道将news.Date转为和todaysDate完全一致的格式后再做对比，修正结构指令的附着节点：

<ng-container *ngFor="let news of data">
  <!-- 统一日期格式后对比，*ngIf绑定在ng-container上不生成多余DOM -->
  <ng-container *ngIf="(news.Date | dateFormat:'yyyy.MM.dd') === todaysDate; else showDate">
    <time class="news__date">Today</time>
  </ng-container>

  <ng-template #showDate>
    <time class="news__date">
      {{ news.Date | dateFormat: 'dd.MM.yyyy H:mm' }}
    </time>
  </ng-template>
</ng-container>

如果你后续替换成Angular内置date管道，只需要把模板里的dateFormat改成date即可，逻辑完全一致。

可选优化&注意事项 #

• 如果页面存在长时间不刷新、跨天展示的场景（比如大屏页面24小时挂起），初始化时赋值的todaysDate不会自动更新，可以加个每分钟执行的定时器重算todaysDate，避免跨天后判断错误
• 注意时区一致性：如果news.Date是UTC时间存储，记得在formatDate和日期管道中指定相同时区参数，避免本地时区和服务端时区差导致日期判断偏差
• 如果列表数据量很大，可以在拿到新闻列表数据时，提前给每条新闻加个isToday布尔标记，模板直接判断该字段即可，减少模板中重复的管道计算开销

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