Angular 8: труба, чтобы скрыть прошлые события, не работает - PullRequest
Новая
       9

Angular 8: труба, чтобы скрыть прошлые события, не работает

0 голосов
/ 25 октября 2019

Я создал флажок в своем шаблоне, чтобы скрыть все элементы, которые были выполнены ранее, чем сегодня, в зависимости от bookingEnd в моих данных JSON. Канал recent-filter.pipe.ts должен фильтровать все прошлые события.

В моей проблеме я заранее получаю error TS2365: Operator '>' cannot be applied to types 'number' and 'Date'. в канале, и в моем шаблоне не отображаются данные. Весь сценарий работает на чистом JavaScript, поэтому я думаю, что bookingEnd определенно является объектом даты.

Можете ли вы помочь мне, почему нет данных после применения фильтра канала?

Данные JSON: 

{
  bookingStart: "2019-10-27T23:00:00.000Z",
  bookingEnd: "2019-12-29T23:00:00.000Z",
  city: "Manhattan",
  confirmed: false,
  country: "UK"
}

Recent-filter.pipe.ts: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'recentFilter'
})
export class RecentFilterPipe implements PipeTransform {
  transform(list: any[], checked: boolean) {
    if (checked) {
      const futureDates = list.filter(x => {
        return Date.parse(x.bookingEnd) > new Date();
      });
      return futureDates;
    } else {
      return list;
    }
  }
}

bookings-table.component.html:

<tr
  *ngFor="
    let item of bookings
    | recentFilter: checked
  ">
      ...
</tr>

Ответы [ 2 ]

1 голос
/ 25 октября 2019

Ошибка, которую вы получаете, говорит вам не использовать> для сравнения дат
Для сравнения используйте метод .getTime () 

new Date(x.bookingEnd).getTime() > new Date().getTime()
0 голосов
/ 25 октября 2019

Проблема здесь заключается в том, что Date.Parse возвращает число. Документация гласит: Date.Parse (Dev Mozilla)

Вы должны использовать new Date(Date.Parse([YOUR_STRING_DATE]));, но я бы посоветовал вам знать о неправильных форматах строк, и нулевые значения будут разбирать даты.

Было бы лучше избежать Date.Parse с более современным синтаксисом синтаксического анализа Дата синтаксического анализа es6 , а затем сравнить их с помощью функции getTime () Сравнить даты es6

...