根据以角度 6+ 输入的日期过滤表结果答案

【问题标题】：Filter table results based on date entered in angular 6+根据以角度 6+ 输入的日期过滤表结果
【发布时间】：2019-02-08 10:18:29
【问题描述】：

我的 Angular 6 应用程序有一个表格，其中填充了后端数据（以 JSON 形式出现）。此外，我添加了一个“文本”类型的输入表单控件，以根据特定列上的文本过滤结果。基本上这个过滤器发生在每个（keyup）事件上。现在，我需要添加一个“日期”类型的输入表单控件，以根据表格另一列中的日期过滤结果。

我用于文本过滤的模板标记 -

   <p>
      <input
        #query
        (keyup)="filter(query.value)"
        type="text"
        class="form-control"
        placeholder="Search Venues by Name...">
  </p>

我在相应组件中用于此过滤的事件处理程序 -

filter(query: string) {
    this.filteredVenues = (query) ?
      this.venues.filter(v => v.name.toLowerCase().includes(query.toLowerCase())) :
      this.venues;
  }

所以，我的文本过滤工作正常。如果我输入日期，我需要帮助我如何进行相同的过滤。我的 JSON 中的日期格式如下所示，

2019-01-28T01:26:12.738Z
2018-07-15T00:10:10.749Z
2019-01-28T01:21:06.223Z

我尝试使用与上述相同的方法（文本过滤），但我面临的并发症是 -

Keyup 事件不会触发
我输入的内容与后端 JSON 中存储的内容之间的日期格式不兼容

这是我为日期过滤编写的代码。我确信下面有很多我需要修改的地方。

模板 -

<input
    #queryDate
    (keyup)="filterDate(queryDate.value)"
    type="date"
    class="form-control"
    placeholder="Search Venues by Date...">

Component.ts -

filterDate(queryDate: date) {
    this.filteredVenues = (queryDate) ?
    this.venues.filter(v => v.datecreated.includes(queryDate)) :
    this.venues;
  }

谁能指导我如何使上述日期格式正常工作（过滤）？

【问题讨论】：

代替keyup事件，尝试使用change事件：(change)="filterDate(queryDate.value)"
@JoHTVS 谢谢...让我看看
你想只按日期过滤吗？
@Ininiv 我也需要按时间过滤。我想出了一种按日期过滤的方法。我在下面发布了解决方案。您能否修改它以按时间过滤？将不胜感激。

标签： javascript html angular datefilter tablefilter

【解决方案1】：

试试这个：

filterDate(queryDate: date) {
this.filteredVenues = (queryDate) ?
this.venues.filter(v => new Date(v.datecreated) == queryDate) :
this.venues;

}

【讨论】：

【解决方案2】：

我尝试了以下方法并且成功了 -

模板代码 -

<input
  #queryDate
  (change)="filterDate(queryDate.valueAsDate)"
  type="date"
  class="form-control"
  placeholder="Search Venues by Date...">

TypeScript 代码 -

filterDate(queryDate: any) {
    this.filteredVenues = (queryDate) ?
    this.venues.filter(v => v.datecreated.includes(queryDate.toISOString().split('T')[0])) :
    this.venues;
  }

【讨论】：