Question

我需要添加日期范围的过滤器。意思是我只需要显示用户从日期和日期输入的数据。我有一个数据数组，其中只显示一个日期。但是我想像用户输入任意两个日期（“从”和“到”）那样对它进行过滤，并且在数组中，我只显示那些在输入日期之间的数据。

Error: Invalid index

on k8-cluster.tf line 85, in resource "aws_instance" "workers":
85:   subnet_id = "${data.aws_subnet_ids.subnet_list.ids[count.index]}"
|----------------
| count.index is 2
| data.aws_subnet_ids.subnet_list.ids is set of string with 4 elements

This value does not have any indices.

.ts

Error: Error in function call

on k8-cluster.tf line 85, in resource "aws_instance" "workers":
85:   subnet_id = "${element(data.aws_subnet_ids.subnet_list.ids, count.index)}"
|----------------
| count.index is 3
| data.aws_subnet_ids.subnet_list.ids is set of string with 4 elements

Call to function "element" failed: cannot read elements from set of string.

Answer 1

尝试使用MAT date Picker 它具有日期之间的所有功能，日期过滤器等

Answer 2

根据用户日期过滤数组。首选输入上的任何日期选择器，以选择日期对象，并避免额外的开销。我更喜欢用于日期比较和过滤的时刻。要更快地进行数据过滤，请参阅交叉过滤器。尽管有任何长度的数组，它都比普通过滤快得多。

Answer 3

这是有关如何解决该问题的粗略草图。如果直接复制并粘贴，可能会无法正常工作，但这会向正确的方向移动。

您可以通过在两个日期输入上使用ngModelChange事件绑定来过滤数据。

<div class="col-md-3 form-group">
    <input type="date" class="form-control" (ngModelChange)="onDateSelection($event)" [(ngModel)]="from"> //From date
</div>
<div class="col-md-3 form-group">
    <input type="date" class="form-control" (ngModelChange)="onDateSelection($event)" [(ngModel)]="to"> //To Date
</div>

在Component.ts上，您可能希望创建数据的浅表副本，以便我们可以将该副本用于过滤目的。然后，我们定义onDateSelection()方法。我们对日期输入进行解码，然后将其转换为javascript Date对象。然后，我们对它们进行相应的过滤。

ngOnInit() {
  this.temp = [...this.data1];
}

onDateSelection() {
  if (this.from && this.to) {
    const fromDate = new Date(this.from.split(/\D/));
    const toDate = new Date(this.to.split(/\D/));
    this.data1 = this.temp.filter(obj => new Date(obj.date) > fromDate && new Date(obj.date) < toDate);
  }
}

Answer 4

首先转换您的“ data1”，添加属性“ date”，该属性是格式为YYYYmmdd的日期的字符串。您可以使用此函数添加属性：companyName和statusName以避免使用* ngIf。我没有证明，但是可以像

companies=[{id:999,name:"Airlink Communication"},{id:637,name:"Ascertia (Pvt) Ltd"},..]

const months=[{month:"00",name:"ENE"},{month:"01",name:"FEB"}...]
dataFormated=data.map(x=>{
   const company=companies.find(c=>c.id==x.company_id);
   const status=x.status.substring(0,1).toUpperCase()+x.status.substr(1)
   const datepart=x.submitted_at.split('-');
   const date=''+datepart[2]+month.find(m=>m.name==datepart[1]).month+datepart[0]
   //date becomes, e.g. "180611" for x.submited_at "11-JUL-18"

   return 
     {
         ...x,
         companyName:company?company.name:'',
         status:status
         date:date
     }
})

那么，您可以使用新属性“日期”进行过滤-是字符串，可以使用过滤器或if-

已更新，过滤条件变为

if (this.from && this.to) {
    //first convert this.from and this.to to string of form YYmmdd
    //your'e using simply html input type date that return a string
    //I suggested you use mat-datepicker or ng-datepicker, but in your case
    const fromDate = new Date(this.from.split(/\D/));
    const toDate = new Date(this.to.split(/\D/));

    //see how convert a number in string with 2 digits using slice(-2), 
    //e.g. ('0'+2).slice(-2) is "02"
    const fromDateTxt=''+(fromDate.getFullYear()%100)+
      ('0'+fromDate.getMonth()+1).slice(-2)+
      ('0'+fromDate.getDate()).slice(-2)

    const toDateTxt=''+(toDate.getFullYear()%100)+
      ('0'+toDate.getMonth()+1).slice(-2)+
      ('0'+toDate.getDate()).slice(-2)

    this.data1=dataFormated.filter(
          obj => obj.date >= fromDateTxt && obj.date< toDateTxt);
    console.log(this.data1);
}

Angular Filter by 2 date

4 个答案: