Question

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

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

   <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

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

键入事件不会触发
日期格式不兼容

这是我为日期过滤编写的代码。我确定我需要在下面进行很多修改。

模板-

<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;
  }

有人可以指导我如何针对上述日期格式进行此工作（过滤）吗？

Answer 1

尝试一下：

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

}

Answer 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;
  }

根据角度6+中输入的日期过滤表格结果

2 个答案: