Angulars ngx-bootstrap 日期范围输出到日期范围过滤器管道

Question

https://stackblitz.com/edit/timeline-angular-7-uj3jtl

我正在使用 ngx-bootstraps 日期选择器构建功能，使用 date range picker. 它允许用户 select 开始和结束日期。

这些日期在 selected 之后，如果日期落在 select 开始和结束日期内，我希望数组（内容）进行过滤。

我已经设法通过开始日期和结束日期的控制台日志获得了所需的输出。我现在需要将这些值发送到我的 *ngFor 循环，如下所示用于日期范围管道。

<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location' | dateRangeFilter: startDate: endDate">

然后将这些输入日期范围管道和 returns 过滤结果。

我已经研究了一段时间，我创建了一个 StackBlitz 减去我所有的尝试。我遇到的问题是日期与数组中的日期格式不匹配。我确实在某一时刻解决了这个问题，但不利于将更新后的 startDate 和 endDate 传递给 *ngFor 循环。

    dateFilterChanged(bsRangeValue: string) {
    console.log('filterValue', bsRangeValue);
    const startDate = new Date(bsRangeValue[0]);
    const endDate = new Date(bsRangeValue[1]);
       console.log(this.datePipe.transform(startDate,"dd-MM-yyyy"));
     console.log(this.datePipe.transform(endDate,"dd-MM-yyyy"));
  }

更新

<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location' | dateRangeFilter: bsRangeValue[0]: bsRangeValue[1]">

直接将值传递给管道 - 现在只需要帮助来配置管道。

这方面的任何帮助都会很棒！

Answer 1

好的，我希望这对其他人有所帮助。终于让它工作了。请看原文StackBlitz.

所缺少的只是在我的范围过滤器管道中引用对象属性正确。

        let a = value.filter(
          m => new Date(m.dateTime) >= startDate && new Date(m.dateTime) <= endDate
        )

Angulars ngx-bootstrap 日期范围输出到日期范围过滤器管道

Angulars ngx-bootstrap date range output to date range filter pipe

angular

typescript

sorting

ngx-bootstrap