在打字稿角度中格式化时间

Question

我想在我的FormArray中迭代time，我正在以以下格式从 API 接收时间：

14.21.00

我想像这样格式化这次：

2:21 PM

我正在尝试使用 AngularDatePipe进行格式化，如下所示：

{{summon.value.summonTime | date :'shortTime' }}

但出现错误：

错误：无效管道参数："无法将管道"DatePipe"的"14.21.00"转换为日期">

在这里我复制了堆栈闪电战

根据我的研究，如果有任何指导和建议来解决这个问题，14.21.00JavaScript/Typescript 中不支持时间格式。

Answer 1

试试这个(在你的堆栈闪电战代码上测试(：

time:{{'1990-10-10 '+ summon.value.summonTime.split('.').join(':') | date:'shortTime' }}

要使用"date"管道，时间也必须跟在日期后面，因此我们可以传递任何日期来验证日期管道。例如，这有效：{{'1990-10-10 01：02：03' | date：'shortTime'}}，这不起作用：{{'01：02：03' | date：'shortTime'}}。

我还替换了"."(点(准时使用 "：" 并拆分和连接以根据需要格式化。

Answer 2

希望你做得很好!!

在所需的文件夹中创建一个新管道。完成后，请在模块中提供详细信息(导入和声明(：-

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dateTransformer'
})
export class DateTransformerPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value && value.length > 0 ? value.replace('.', ':') : value;
}
}

完成后，在您的代码段中更新以下内容：-

<ng-container [formGroupName]="i">
<input type="checkbox" formControlName="isChecked" />
{{ summon.value.summonTime | dateTransformer }}
item: {{ summon.value.itemNo }}
<br />
time:{{ summon.value.summonTime | dateTransformer }}
<br />
</ng-container>

希望，我能够解决您的查询！快乐编码！！干杯！！！

Answer 3

你可以按如下方式使用ngx-moment

{{summon.value.summonTime | amParse:'HH.mm.ss' | amDateFormat:'hh:mm a'}}

查看修改后的堆栈闪电战 https://stackblitz.com/edit/angular-moment-pipe-2324234