Angulars ngx-bootstrap выводит диапазон даты в диапазон фильтра даты

Question

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

Я создаю функциональность с помощью средства выбора даты ngx-bootstraps, используя средство выбора диапазона дат. Это позволяет пользователям выбирать дату начала и окончания.

С этими датами после того, как они были выбраны, я хочу, чтобы массив (содержимое) отфильтровывался, если дата падает в соответствии с выбранными датами начала и окончания.

Мне удалось получить желаемый результатчерез консольный журнал для 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]">

Передайте значения прямо в трубу - вам просто нужна помощь для настройки трубы.

Любая помощь по этому вопросу была бы удивительной!

Answer 1

Хорошо, я надеюсь, что это поможет кому-то еще.Наконец-то все заработало.Пожалуйста, взгляните на оригинал StackBlitz .

Все, чего не хватало, это правильно сослаться на свойство объекта в моей трубе фильтра диапазона.

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