Angular ts datepipe 错误“invalidPipeArgument：'无法将“03:45:00”转换为日期'”

Question

我想将通过前端 API 获得的 Date 对象显示为“shortTime”，因此只有小时和分钟。

但是当我这样做时：

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

我收到以下错误： InvalidPipeArgument: 'Unable to convert "03:45:00" into a date' for pipe 'DatePipe'

我认为那是因为 Angular 认为对象不是 Date 类型...

我通过 JSON 格式的 API 调用接收这些对象。我制作了一个模型来设置对象的类型。 “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 数据不是有效的日期格式，因为它只包含时间。一个有点 hacky 的解决方案是创建一个新的 Date 对象，其中包含任意年、月和日以及来自您获得的字符串的时间。

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

这会将时间字符串的小时、分钟和秒传递给 Date 构造函数。

您可以在 map 步骤中执行类似上述代码的操作（即将您的可观察响应通过管道传输到 rxjs map 运算符）。您可能还想将 scheduleTime 的类型更改为 Date | string 并在它是字符串实例而不是日期时进行转换。

这是一个完整的代码示例：

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导入地图

当您通过日期管道传递它时，它将接受它作为有效日期。