Angular 8：隐藏过去事件的管道不起作用答案

【问题标题】：Angular 8: Pipe to hide past events doesn't workAngular 8：隐藏过去事件的管道不起作用
【发布时间】：2019-10-25 12:41:34
【问题描述】：

我在我的模板中创建了一个复选框，根据我的 JSON 数据中的 bookingEnd 隐藏所有早于今天发生的元素。 recent-filter.pipe.ts 管道应该过滤所有过去的事件。

对于我的问题，我在管道中提前获得了error TS2365: Operator '>' cannot be applied to types 'number' and 'Date'.，并且没有数据显示在我的模板上。整个场景在纯 JavaScript 中运行，所以我认为bookingEnd 绝对是一个日期对象。

你能帮我为什么应用管道过滤器后没有数据吗？

JSON 数据：

{
  bookingStart: "2019-10-27T23:00:00.000Z",
  bookingEnd: "2019-12-29T23:00:00.000Z",
  city: "Manhattan",
  confirmed: false,
  country: "UK"
}

最近的过滤器.pipe.ts：

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

@Pipe({
  name: 'recentFilter'
})
export class RecentFilterPipe implements PipeTransform {
  transform(list: any[], checked: boolean) {
    if (checked) {
      const futureDates = list.filter(x => {
        return Date.parse(x.bookingEnd) > new Date();
      });
      return futureDates;
    } else {
      return list;
    }
  }
}

bookings-table.component.html：

<tr
  *ngFor="
    let item of bookings
    | recentFilter: checked
  ">
      ...
</tr>

【问题讨论】：

你应该通过获取时间戳来比较日期，即new Date().getTime()所以你可以使用大于和小于运算符。

标签： javascript angular date pipe

【解决方案1】：

你得到的错误已经告诉你不要使用 > 来比较日期
要比较它们，请使用 .getTime() 方法

new Date(x.bookingEnd).getTime() > new Date().getTime()

【讨论】：

感谢您的帮助。但是返回的对象仍然是空的。错误似乎已解决！

【解决方案2】：

这里的问题似乎是 Date.Parse 返回一个数字。文档说：Date.Parse (Dev Mozilla)

你应该使用new Date(Date.Parse([YOUR_STRING_DATE])); 但我建议您注意错误的字符串格式，空值会解析日期。

最好避免 Date.Parse 使用更现代的语法来解析 Date Parsing es6，然后使用 getTime() 函数 Compare Dates es6 比较它们

【讨论】：