网站搜索

typescript - Angular 的 ngx-bootstrap 日期范围输出到日期范围过滤管道


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

我正在使用 ngx-bootstrap 的日期选择器构建功能,使用的是日期范围选择器。它允许用户选择开始日期和结束日期。

在选择了这些日期之后,我希望数组(content)能够过滤出日期是否在所选的开始日期和结束日期之间。

我已经通过控制台日志成功获得了 startDate 和 endDate 的期望输出。现在我需要将这些值发送到我的 *ngFor 循环中,如下面的日期范围管道所示。

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

然后这些被输入到日期范围管道中,并返回过滤后的结果。

我已经玩这个一段时间了,我创建了一个 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]">

直接将值传递到管道——现在只需要帮助配置管道。

任何关于这方面的帮助都会非常棒!

答案#1

好的,我希望这能帮助其他人。终于把它搞定了。请查看原始的 StackBlitz。

唯一缺少的就是在我的范围过滤管道中正确引用对象属性。

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