Question

如何根据日期列过滤表中的记录。我将以下代码用于过滤器，但它的抛出错误如

错误TypeError：无法读取null的属性'indexOf'

temp = [{ "firstName":"Ravi", "date":"2019-04-04T06:12:43.541Z", "status":"created" }, { "firstName":"Shagul", "date":"2019-04-05T06:12:43.541Z", "status":"created" }, { "firstName":"Abdul", "date":"2019-04-05T06:12:43.541Z", "status":"created" }, { "firstName":"Gani", "date":"2019-04-05T06:12:43.541Z", "status":"created" }];

public updateFilter(event) {
const temp = this.temp.filter(function (d) {
    return (
    d.firstName.toLowerCase().indexOf(val) !== -1 ||
    d.date.toLowerCase().indexOf(val) !== 1 ||
    d.status.toLowerCase().indexOf(val) !== -1 ||
    !val
  );
});

 this.rows = temp;
 this.table.offset = 0;
}

Answer 1

从您的代码中可以推断出，temp是存储已过滤数据的“临时”存储，对吗？我假设val是过滤器字符串。

您很亲密，但是您需要进行以下修改：

updateFilter(event) {
  const temp = this.temp.filter(d => {
    const firstNameMatch = d.firstName.toLowerCase().indexOf(val) !== -1 || !val; 
    const dateMatch =  d.date.indexOf(val) !== -1 || !val; 
    const statusMatch = d.status.toLowerCase().indexOf(val) !== -1 || !val; 

    return firstNameMatch || dateMatch || statusMatch;
  });
  this.rows = temp;
  this.table.offset = 0;
}

关于日期，由于不确定您的搜索字符串是否大写，因此我没有使用toLowerCase()。（例如2019-04-04T06：12：43.541Z）

Answer 2

我会这样重写您的代码：

updateFilter(event) {
  var val = event.value.toLowerCase();

  const temp = this.temp.filter(x => x.firstName.toLowerCase().indexOf(val) != -1
    || x.status.toLowerCase().indexOf(val) != -1
    || x.date.toLowerCase().indexOf(val) != -1);
  console.log(temp);
}

根据假设，您只需要按日期过滤记录，因此我已使用DatePicker演示更新了Stackblitz。

如何基于角度4中的日期过滤记录

2 个答案: