我如何在Angular中过滤每次日期变化?

Question

我想在每次日期更改时更新表中的数据。我准备了一个这样的函数，但是它只过滤一次。必须刷新页面才能第二次执行过滤。我尝试用window.location.reload()函数刷新页面，但这次数据在过滤之前出现。

这是我的输入

<div class="col-xxl-3 col-sm-4">
<input (change)="filterByDate()" id="date-range-input" class="form-control bg-light border-light" type="text" mwlFlatpickr  placeholder="Select date" mode="range">
</div>

这是函数

filterByDate() {
this.dateRange = document.getElementById('date-range-input') as HTMLInputElement
let dateRangeString = this.dateRange.value
let startDateString = dateRangeString.substring(0,10)
let endDateString = dateRangeString.substring(13,24)
this.startDateObj = new Date(startDateString);
this.endDateObj = new Date(endDateString);
console.log(this.startDateObj, this.endDateObj)
this.clientResults = this.clientResults.filter(m => new Date(m.createddate) >= this.startDateObj && new Date(m.createddate) <= this.endDateObj)
this.clientResults.sort((a, b) => new Date(b.createddate).getTime() - new Date(a.createddate).getTime());
this.resultCount = this.clientResults.length
this.approvedResults = this.clientResults.filter(item => item.boolresult == true).length
this.rejectedResults = this.clientResults.filter(item => item.boolresult == false).length
this.totalResultAmount = this.clientResults.filter(item => item.transactionamount).reduce((sum, current) => sum + current.transactionamount, 0);
this.dateRange = document.getElementById('date-range-input')?.removeAttribute('value')
}

这里的主要问题是filterByDate()函数只适用于第一个更改事件。但是我想在每个更改事件上运行这个函数。我该怎么做呢?

Answer 1

看起来你正在使用angularx-flatpickr。mwlFlatpickr有一个事件flatpickrChange，它在日期变化时发出。试着用一下

<input (flatpickrChange)="filterByDate()" id="date-range-input" class="form-control bg-light border-light" type="text" mwlFlatpickr  placeholder="Select date" mode="range">