每次日期更改为 Angular 时，如何过滤？

Question

I want to update the data in the table every time the date changes. I prepared a function like this, but it only filters once. It is necessary to refresh the page to perform a filtering for the second time. I tried to refresh the page with the window.location.reload() function, but this time the data comes before filtering.

This is my input

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

And this is my function

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')
}

The main problem here is that the filterByDate() function only works with the first change event. But I want to run this function on every change event. How can I do that?

Answer 1

It looks you are using angularx-flatpickr . mwlFlatpickr has an event flatpickrChange which emits on date change. Try using it.

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