Angular ts datepipe error "invalidPipeArgument:« Невозможно преобразовать «03:45:00» в дату »»

Question

Я хочу показать объект Date, который я получаю через API на веб-интерфейсе, как «shortTime», поэтому только часы и минуты.

Но когда я делаю это через:

<h2>{{data.scheduleTime | date:'shortTime'}} - {{data.actualLandingTime | date:'shortTime'}}</h2><br>

Я получаю следующую ошибку: InvalidPipeArgument: «Невозможно преобразовать« 03:45:00 »в дату» для канала «DatePipe»

И я думаю, это потому, что Angular не делает ' Не думаю, что объект имеет тип Date ...

Я получаю эти объекты через вызов API в формате JSON. Я сделал модель для установки типов объекта. И «scheduleTime», и «actualLandingTime» являются объектами даты в модели de:

Моя модель называет FlightInfoModel:

actualLandingTime:           Date;
scheduleTime:                Date;

Я получаю их как:

actualLandingTime: "2020-04-29T03:17:33.000+02:00"
scheduleTime: "03:45:00"

для и я хочу только отображать часы и минуты ..

Если это помогает увидеть проблему, вот как я получаю API для этой страницы:

data: FlightInfoModel;

  ngOnInit(): void {


    this.flightService.getFligthInfo<any>('129392719696922308').subscribe(response => {this.data = response, console.log(response)},
        error => console.log(error));


  }

Answer 1

Данные, которые вы получаете для scheduleTime, не являются допустимым форматом даты, поскольку они включают только время. Одним из довольно хакерских решений было бы создание нового объекта Date с произвольным годом, месяцем, днем ​​и временем из получаемой строки.

let scheduleDate = new Date(2020, 4, 4, ...scheduleTime.split(':').map(t => Number(t));

Это передаст часы, минуты и секунды этой строки времени в конструктор Date.

Вы могли бы сделать что-то вроде приведенного выше кода на шаге карты (например, pipe) ваш наблюдаемый ответ на оператор карты rx js). Вы также можете изменить тип scheduleTime на Date | string и выполнять преобразование всякий раз, когда это экземпляр строки, а не Date.

Вот полный пример кода:

this.flightService.getFligthInfo<any>('129392719696922308').pipe(
  map(info => {
    if(typeof info.scheduleTime === "string") {
       const splitTime: number[] = (<string>info.scheduleTime)
         .split(':')
         .map(t => Number(t));
       return {
         actualLandingTime: info.actualLandingTime,
         scheduleTime: new Date(2020, 4, 4, ...splitTime)
       }
    }
    return info
  }
)

Не забудьте импортировать карту из rxjs/operators

Когда вы пропустите ее через канал даты, она примет ее в качестве действительной даты.