Angular 1.5 中基于比较日期的条件样式答案

【问题标题】：Conditional style in Angular 1.5 based on comparing datesAngular 1.5 中基于比较日期的条件样式
【发布时间】：2020-09-25 12:29:31
【问题描述】：

我正在尝试将 Angular 列表元素 (task.task_deadline_date) 与今天的日期进行比较，如果是今天或更晚，则将日期加粗（在今天之前以保持常规字体）。我已经测试了以下语法，但我认为问题在于比较日期，有没有办法将格式设置为一致？

<td 
  class="min-wth-100" 
  ng-style="{'font-weight':(task.task_deadline_date >= new Date()) ? 'bold' : '' }"
>
  {{::task.task_deadline_date}}
</td>

我已经尝试了下面链接中的方法，但试图将其调整为单行而不是必须向控制器添加代码。不确定管道是否是一种一致地设置日期格式的方法？

Angular: How to conditionally apply a style by using Date Pipe in the condition?

【问题讨论】：

标签： angular date compare conditional-statements styling

【解决方案1】：

像这样比较日期它会返回真/假

let task_deadline_date = '2012-03-19T07:22Z';

console.log(new Date(task_deadline_date) >= new Date())

// 在你的情况下 new Date(task.task_deadline_date) >= new Date()

【讨论】：

有趣，您的代码在控制台中有效，但在我的 html 中无效 '{{::task.task_deadline_date}}' 给出以下错误
main.min.js:1 错误：[$parse:syntax] 语法错误：令牌“日期”出乎意料，在表达式 [{'font-weight' 的第 21 列应为 [)] :(new Date(task.task_deadline_date) >= new Date() ? 'bold' : '' }] 从 [Date(task.task_deadline_date) >= new Date() ? 'bold' : '' }] 开始。@ 987654321@
在 ts 文件中应用此逻辑并将该变量简单地传递给它

【解决方案2】：

我最终在控制器脚本中添加了一个函数：

rept.checkDate = function(date) {
          return new Date(date) >= new Date();
        };

然后将 HTML 更改为：

<td class="min-wth-100" ng-style="rept.checkDate('{{task.task_deadline_date}}') && {'font-weight':'bold'} || {'font-weight':''}">{{::task.task_deadline_date}}</td>

希望有一个单行选项，但是哦。感谢您的帮助。

【讨论】：