Angular 5 + ag-grid：如何格式化JSON时间为hh:mm并绑定列

嗨，我来帮你搞定这个时间格式化的需求！你要把JSON里的ISO格式时间（比如2018-04-28T08:16:07.632Z）转成hh:mm格式展示在ag-grid里，用Angular Pipe完全可以实现，下面给你两种实用的方案：

方案一：直接用Angular DatePipe + ag-grid valueFormatter #

这种方法最直接，不用额外写组件或Pipe，适合只在这一个表格里用的场景：

1. 首先在你的组件里注入DatePipe，记得在组件的providers里声明它（Angular 5需要这么做）：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-your-table',
  templateUrl: './your-table.component.html',
  providers: [DatePipe] // 注入DatePipe
})
export class YourTableComponent {
  constructor(private datePipe: DatePipe) {}

  // 表格列定义
  columnDefs = [
    // 其他列配置...
    {
      headerName: '时间',
      field: 'timeField', // 替换成你JSON里的时间字段名
      valueFormatter: (params) => {
        // 先判断值是否存在，避免空值报错
        if (!params.value) return '';
        // 用DatePipe转成HH:mm格式（24小时制），如果要12小时制就用hh:mm
        // 要是想保持UTC时间，加第三个参数：'UTC'
        return this.datePipe.transform(params.value, 'HH:mm');
      }
    }
  ];

  // 从JSON获取的表格数据
  rowData = []; // 这里放你的JSON数据
}

2. 确保你的模块已经导入了CommonModule（因为DatePipe属于CommonModule的一部分），一般Angular组件模块都会导入这个，不用额外操作。

方案二：自定义时间Pipe + ag-grid 单元格渲染器 #

如果这个时间格式需要在多个地方复用，自定义一个Pipe会更方便：

第一步：创建自定义Pipe #

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

@Pipe({
  name: 'timeFormat' // 自定义Pipe的名称
})
export class TimeFormatPipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(value: string): string {
    if (!value) return '';
    // 这里统一转成HH:mm格式，可根据需求修改
    return this.datePipe.transform(value, 'HH:mm') || '';
  }
}

第二步：创建自定义单元格组件 #

用这个Pipe来渲染时间列：

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: `{{ params.value | timeFormat }}` // 直接用自定义Pipe格式化
})
export class TimeCellComponent implements ICellRendererAngularComp {
  params: any;

  // ag-grid初始化单元格时调用
  agInit(params: any): void {
    this.params = params;
  }

  // 单元格刷新时调用
  refresh(params: any): boolean {
    this.params = params;
    return true;
  }
}

第三步：在模块里配置 #

把自定义的Pipe和单元格组件加到模块里，还要告诉ag-grid这个组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgGridModule } from 'ag-grid-angular';
import { YourTableComponent } from './your-table.component';
import { TimeFormatPipe } from './time-format.pipe';
import { TimeCellComponent } from './time-cell.component';

@NgModule({
  declarations: [
    YourTableComponent,
    TimeFormatPipe,
    TimeCellComponent
  ],
  imports: [
    CommonModule,
    // 告诉ag-grid要使用的自定义单元格组件
    AgGridModule.withComponents([TimeCellComponent])
  ],
  providers: [DatePipe],
  entryComponents: [TimeCellComponent] // Angular 5需要这个，动态创建组件用
})
export class YourModule {}

第四步：在列定义里使用 #

// 你的组件里的列定义
columnDefs = [
  // 其他列...
  {
    headerName: '时间',
    field: 'timeField',
    cellRendererFramework: TimeCellComponent // 使用自定义单元格组件
  }
];

注意事项 #

• 时区问题：原始时间是UTC格式（带Z），DatePipe默认会转换成本地时区，如果要保持UTC时间，在transform时加第三个参数：this.datePipe.transform(params.value, 'HH:mm', 'UTC')
• 空值处理：一定要判断值是否存在，避免空值或无效时间导致报错
• 格式选择：HH:mm是24小时制，hh:mm是12小时制，根据你的需求调整就行

这样两种方案都能完美实现你的需求，选哪种看你的场景～

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