Angular中ngClass布尔表达式触发模板解析错误，求排查

你碰到的是Angular模板表达式的语法限制问题——Angular的模板解析器不允许在模板里直接使用new Date()这类创建对象的操作，这就是你看到Parser Error: Missing expected )的核心原因。另外，把业务逻辑直接写在模板里也不符合Angular的最佳实践，咱们一步步来修复：

第一步：把日期判断逻辑移到组件类中 #

在你的组件TS文件里添加一个专用方法，用来判断Moment对象是否为当前日期：

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  dates: moment.Moment[] = []; // 这里是你的dates数组

  // 判断传入的Moment日期是否为当天
  isCurrentDay(date: moment.Moment): boolean {
    // 用moment()直接获取当前日期，比new Date()更贴合Moment的用法
    return date.isSame(moment(), 'day');
  }
}

第二步：修改模板调用组件方法 #

把模板里的直接判断替换成调用组件类的方法，这样既符合Angular的语法规则，也让模板更简洁：

<div class="timeline-date" *ngFor="let date of dates" [ngClass]="{'current-date': isCurrentDay(date) }">
  {{date.format("MMM Do")}}
</div>

为什么原来的代码会报错？ #

Angular对模板表达式有严格的安全和语法限制：

• 不允许使用new、delete、typeof等操作符
• 不允许调用带参数的构造函数
• 尽量避免在模板里写复杂逻辑，这会让模板难以维护，也不利于单元测试

把判断逻辑移到组件类后，不仅解决了模板解析错误，还让代码结构更清晰，后续维护和测试也更方便。

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