Angular：将SQL 24小时制时间格式转换为12小时制格式问题求助

核心问题原因 #

现有代码的问题在于convertedTime是全局单值变量，仅存储了数组第一条数据的转换结果，而Material表格的每一行都会复用这个变量，因此所有行都显示同一个时间值。

方案1：自定义Angular管道（最推荐，复用性最高） #

自定义管道可以实现和DatePipe一致的HTML直接调用效果，一次定义全局可用，完美适配动态表格的所有行数据。

1. 新建time-format.pipe.ts文件，代码如下：

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

@Pipe({
  name: 'timeFormat'
})
export class TimeFormatPipe implements PipeTransform {
  transform(timeStr: string, format: string = 'hh:mm A'): string {
    if (!timeStr) return '';
    return moment(timeStr, 'HH:mm').format(format);
  }
}

2. 在你当前使用的模块的declarations数组中添加TimeFormatPipe完成注册
3. 修改HTML表格部分代码：

<ng-container matColumnDef="start_time">
  <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
  <td class="font-content" mat-cell *matCellDef="let row">{{ row.start_time | timeFormat }}</td>
</ng-container>

4. 原TS的grabTime方法无需额外处理时间转换逻辑，保留原有数据源赋值即可：

grabTime(){
  this.dataService.grabTimeContent().subscribe(res=>{
    this.post= res.tableTime;
    this.dataSource = new MatTableDataSource(this.post);
  });
}

方案2：预处理数据源（适合不需要复用转换逻辑的场景） #

拿到接口返回数据后，遍历数组为每一项新增转换后的时间字段，直接绑定到表格即可：
修改后的grabTime代码：

grabTime(){
  this.dataService.grabTimeContent().subscribe(res=>{
    // 遍历每一项添加转换后时间
    this.post = res.tableTime.map(item => {
      return {
        ...item,
        convertedTime: moment(item.start_time, 'HH:mm').format('hh:mm A')
      }
    });
    this.dataSource = new MatTableDataSource(this.post);
  });
}

HTML部分修改为：

<td class="font-content" mat-cell *matCellDef="let row">{{ row.convertedTime }}</td>

方案3：无第三方依赖实现（不想用moment的场景） #

可以用浏览器原生Intl.DateTimeFormat实现同样的转换效果，无需引入moment等第三方包，把上述方案中的moment替换为以下逻辑即可：

// 原生转换24小时制时间字符串为12小时制带AM/PM格式
function formatTime(timeStr: string): string {
  if (!timeStr) return '';
  const [hours, minutes] = timeStr.split(':').map(Number);
  const date = new Date();
  date.setHours(hours, minutes, 0, 0);
  return new Intl.DateTimeFormat('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: true
  }).format(date);
}

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