从数据中筛选数据

Question

这是我的html。我已经在html中使用for循环调用了display[]数组来显示数据。我的目标是在页面加载时显示所有列表，我还希望根据给定的日期输入过滤数据。

但是，从现在开始，当我根据日期过滤数据时。例如:如果我选择date从2020年12月1日到2020年12月7日。网格显示为空，尽管在12月7日有记录。类似地，如果我选择日期从12月1日到12月15日，它将显示12月15日以下的所有记录，但不包括15日的日期数据。

我想显示所选的两个日期之间的记录。但到目前为止，它显示的日期低于所选的第二个日期。

<input type="date" (change)="changeFirstInput($event)"> - 
  <input type="date" (change)="changeSecondInput($event)">
  <table style="width:100%">
  <thead>
      <tr>
          <th>name</th>
          <th>date</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let o of display">   <!-- change made here only -->
          <td>{{o.name}}</td>
          <td>{{o.ts | date: 'dd/MM/yyyy'}}</td>
      </tr>
  </tbody>
</table>

我从服务中将数据检索到一个数组中: Info[]。info包含一个对象数组。我还使用了一个名为display[]的新数组，它应该在过滤日期时动态更改。

   pattern = /(\d{2})\.(\d{2})\.(\d{4})/;
  public date1: Date = new Date("2000-01-01");
  public date2: Date = new Date();

  display = [];

  changeFirstInput(e) {
    this.date1 = new Date(e.target.value.replace(this.pattern, '$3-$2-$1'));
  }

  changeSecondInput(e) {
    this.display = Object.assign([], this.Info);
    this.date2 = new Date(e.target.value.replace(this.pattern, '$3-$2-$1'));

    this.display = this.Info.filter(o =>
      new Date(o.ts.replace(this.pattern, '$3-$2-$1')) >= this.date1 &&
      new Date(o.ts.replace(this.pattern, '$3-$2-$1')) <= this.date2);
  }

}

Info[]中的数据。我需要根据给定的日期输入来过滤这些数据。

0: {
id: 1, 
name: "Testing", 
status: "Y", 
ts: "2018-12-07T08:02:00.000Z"}

Answer 1

问题存在于changeSecondInput方法中，其中incentivetype_ts未正确转换为不带时间部分的Date。您可以使用与过滤器Date相同的regex模式。

您可以简单地使用String.substring，而不使用regex，如下所示：

this.display = this.TermsInfo.filter(o =>
  new Date(o.ts.substring(0, 10)) >= this.date1 &&
  new Date(o.ts.substring(0, 10)) <= this.date2);

请看下面的可运行代码片段，这些代码片段说明了当前正在发生的事情以及如何改进。

​

const data = [
  {id: 1, name: "New Car", status: "Y", ts: "2020-12-07T08:02:00.000Z"},
  {id: 2, name: "CPO", status: "Y", ts: "2020-12-07T08:03:00.000Z"},
  {id: 9, name: "Service", status: "Y", ts: "2020-12-15T03:37:00.000Z"},
  {id: 10, name: "Parts", status: "Y", ts: "2020-12-15T03:38:00.000Z"},
  {id: 17, name: "Facility", status: "Y", ts: "2020-12-15T06:09:00.000Z"},
  {id: 25, name: "CSI", status: "Y", ts: "2020-12-15T08:34:00.000Z"}
];

const pattern = /(\d{2})\.(\d{2})\.(\d{4})/;

const date = '07.12.2020';
const dateConverted = date.replace(pattern, '$3-$2-$1');
console.log(dateConverted);

// current result
let convertedTs = data.map(o => o.ts.replace(pattern, '$3-$2-$1'));
console.log(convertedTs);

// corrected result
convertedTs = data.map(o => o.ts.substring(0, 10));
console.log(convertedTs);

​