Angular中如何验证CreateDate非空并跳过空行，解决日期比较时的null值报错问题？

你的问题根源在于错误地把模板插值语法${}和AngularJS的表达式混在一起了，这导致null值的判断逻辑完全没起到作用。我来一步步帮你解决：

为什么原来的写法会报错？ #

${}是模板插值，它会在ng-if指令解析表达式之前，就把所有变量替换成实际值。比如当row.CreateDate为null时，${row.CreateDate.getTime()}会直接被替换成null.getTime()——这在模板渲染阶段就会抛出错误，根本轮不到ng-if去判断“是否为null”这个前置条件。

最佳解决方案 #

方案1：直接使用AngularJS表达式（推荐简单场景）

去掉${}，让ng-if直接处理原生Angular表达式。AngularJS的表达式支持逻辑短路：只要前面的条件为false，后面的代码就不会执行，完美避免null调用getTime()的问题：

<div ng-if="row.CreateDate !== null && dateToCompare.getTime() > row.CreateDate.getTime()">
  <!-- 你的内容 -->
</div>

如果想更严谨，还可以加上类型检查，确保row.CreateDate是有效的Date对象：

<div ng-if="row.CreateDate instanceof Date && dateToCompare.getTime() > row.CreateDate.getTime()">

（注：null instanceof Date会返回false，所以这个写法也能自动过滤null值）

方案2：封装辅助函数（推荐复杂场景）

如果你的日期比较逻辑以后可能变化，或者需要复用，最好把逻辑封装到控制器的辅助函数里，模板会更简洁，也更容易维护：

在控制器中添加函数：

$scope.shouldShowRow = function(createDate, compareDate) {
  // 先判断createDate是否存在且是Date类型
  if (!createDate || !(createDate instanceof Date)) {
    return false;
  }
  // 再执行日期比较
  return compareDate.getTime() > createDate.getTime();
};

然后在模板中调用：

<div ng-if="shouldShowRow(row.CreateDate, dateToCompare)">
  <!-- 你的内容 -->
</div>

这样不管row.CreateDate是null还是其他无效值，都会被提前过滤，不会触发getTime()的错误。

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