DatePipe接受日期、字符串或数字。但它们都需要表示一个有效的日期。首先，你可以这样做：
我需要转换一个时间字符串(例如19:07:33到19:03(，该数据值通过API从数据库检索。
<ion-col size="3" class="col">{{res.oraIT |date:'HH:mm' }}</ion-col>
这里的错误控制台：
core.js:6210 ERROR Error: InvalidPipeArgument: 'Unable to convert "19:07:33" into a date' for pipe 'DatePipe'
at invalidPipeArgumentError (VM33256 vendor.js:105476)
at DatePipe.transform (VM33256 vendor.js:105867)
at pureFunction2Internal (VM33256 vendor.js:81497)
at ɵɵpipeBind2 (VM33256 vendor.js:81671)
at TimbraHomePage_section_24_div_4_div_13_Template (VM33767 TimbraHomePage.js:269)
at executeTemplate (VM33256 vendor.js:65469)
at refreshView (VM33256 vendor.js:65335)
at refreshEmbeddedViews (VM33256 vendor.js:66460)
at refreshView (VM33256 vendor.js:65359)
at refreshEmbeddedViews (VM33256 vendor.js:66460)
<ion-col size="3" class="col">{{toDate(res?.oraIT) | date : 'HH:mm' }}</ion-col>
在角度分量中：
public toDate(fromAPI: string): Date {
let time: string = fromAPI || '00:00:00';
return new Date(`01-01-00 ${time}`);
}
可以理解的是，当DatePipe也接受字符串时，您可能不想运行函数。不幸的是，据我所知，Angular插值仍然不接受字符串模板文字，所以你可能只能逃脱这样的惩罚：
<ion-col size="3" class="col">{{'01-01-00 ' + (res?.oraIT || '00:00:00') | date : 'HH:mm' }}</ion-col>
或者你可以自己制作DatePipe，做你想做的事：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'date2' })
export class DatePipe implements PipeTransform {
public transform(data: string): string {
let time: string = data || '00:00:00';
let date: Date = new Date(`01-01-00 ${time}`);
let hrs: string = this.pad(`${date.GetHours()}`, 2);
let mins: string = this.pad(`${date.GetMinutes()}`, 2);
return `${hrs}:${mins}`;
}
public pad(s: string, n: number): string {
return s.padStart(n, '0');
}
}
将日期管道添加到app.module声明中，可以简化您的html:
<ion-col size="3" class="col">{{res?.oraIT | date2}}</ion-col>