每次日期更改為 Angular 時，如何過濾？

Question

我想在每次日期更改時更新表中的數據。 我准備了一個這樣的function，但是只過濾一次。 第二次過濾需要刷新頁面。 我嘗試使用window.location.reload() function 刷新頁面，但這次數據在過濾之前出現。

這是我的輸入

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

這是我的 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')
}

這里的主要問題是filterByDate() function 僅適用於第一個更改事件。 但是我想在每個更改事件上運行這個 function。 我怎樣才能做到這一點？

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