https://stackblitz.com/edit/timeline-angular-7-uj3jtl
我正在使用date range picker.使用ngx-bootstraps datepicker构建功能,它允许用户选择开始和结束日期。
选择了这些日期后,如果日期与选择的开始日期和结束日期一致,我希望对数组(内容)进行过滤。
我已经设法通过控制台日志为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]">
将值直接传递给管道-现在只需要帮助即可配置管道。
任何对此的帮助将是惊人的!
答案 0 :(得分:0)
好的,我希望这对其他人有帮助。终于成功了。请查看原始的StackBlitz。
所缺少的只是在我的范围过滤器管道中正确引用了对象属性。
let a = value.filter(
m => new Date(m.dateTime) >= startDate && new Date(m.dateTime) <= endDate
)