Angular 5中如何将24小时制时间转换为12小时制？

当然可以！在Angular里实现24小时制时间转12小时制显示非常简单，你可以用内置管道快速搞定，也可以自定义管道适配特殊需求，下面给你两种实用方案：

方案1：用Angular内置的DatePipe #

这是最快捷的方式，Angular的DatePipe已经封装了日期时间格式化能力，你只需要做一点小处理让它能正确解析你的时间字符串：

首先确保你的组件所在模块已经导入了CommonModule（DatePipe属于这个模块的一部分），然后在模板里这样使用：

<!-- 假设start_time的值是类似"23:11:00"的字符串 -->
{{ '1970-01-01T' + dvrForm.controls.start_time.value | date:'h:mm:ss a' }}

逻辑说明： #

• 我们把时间字符串和固定日期1970-01-01T拼接，生成合法的ISO日期字符串，让DatePipe能正确识别
• 格式化规则h:mm:ss a的含义：
  • h：12小时制的小时（范围1-12）
  • mm：两位格式的分钟
  • ss：两位格式的秒
  • a：自动显示AM/PM标识

如果你的start_time已经是Date类型，直接用更简单：

{{ dvrForm.controls.start_time.value | date:'h:mm:ss a' }}

方案2：自定义管道（适配特殊场景） #

如果内置管道的逻辑不符合你的需求（比如不想拼接日期字符串），可以自己写一个专门处理24小时制时间的管道：

第一步：生成管道文件 #

用Angular CLI快速创建：

ng generate pipe time12Format

第二步：实现转换逻辑 #

在生成的time12-format.pipe.ts里编写核心代码：

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

@Pipe({
  name: 'time12Format'
})
export class Time12FormatPipe implements PipeTransform {

  transform(timeStr: string): string {
    // 处理空值，避免报错
    if (!timeStr) return '';
    
    // 拆分时间为小时、分钟、秒
    const [hours, minutes, seconds] = timeStr.split(':').map(Number);
    let period = 'AM';
    let displayHours = hours;
    
    // 转换12小时制逻辑
    if (hours >= 12) {
      period = 'PM';
      displayHours = hours === 12 ? 12 : hours - 12;
    } else if (hours === 0) {
      displayHours = 12;
    }
    
    // 格式化数字为两位（比如1转为01）
    const formattedHours = displayHours.toString().padStart(2, '0');
    const formattedMinutes = minutes.toString().padStart(2, '0');
    const formattedSeconds = seconds.toString().padStart(2, '0');
    
    return `${formattedHours}:${formattedMinutes}:${formattedSeconds} ${period}`;
  }

}

第三步：在模板中使用 #

确保管道所在模块已经声明并导出，然后直接在模板里调用：

{{ dvrForm.controls.start_time.value | time12Format }}

额外提示： #

• 不管用哪种方案，记得处理表单控件为空的情况，避免出现解析报错
• 内置DatePipe支持本地化配置，如果需要显示“上午/下午”这类本地化标识，可以配置Angular的本地化模块

内容的提问来源于stack exchange，提问作者Atul Stha