从数据中筛选数据

Question

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

但是，到目前为止，当我根据日期过滤数据时。 示例：如果我选择从 2020 年 12 月 1 日到 2020 年 12 月 7 日的日期。 尽管 12 月 7 日有记录，但网格显示为空。 同样，如果我选择从 12 月 1 日到 12 月 15 日的日期，它会显示 12 月 15 日以下的所有记录，但不包括 15 日的数据。

我想显示所选 2 个日期之间的记录。 但截至目前，它显示的日期低于所选的第二个日期。

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

请查看下面的可运行代码 sn-p，它说明了当前正在发生的事情以及如何改进它。

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