Angular TypeScript中如何将查询结果epoch时间转为可筛选的时间字符串

完全可以在HTTP请求返回后、数据传入渲染逻辑前完成时间戳转换，以下是具体实现说明和优化点：

注意前置依赖配置 #

使用DatePipe转换日期前需要先完成注入配置：

1. 从@angular/common导入DatePipe

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

2. 在当前组件的@Component装饰器的providers数组中加入DatePipe
3. 在组件构造函数中注入实例：

   constructor(private datePipe: DatePipe) {}
   

两种常用实现方案 #

方案1：subscribe回调中处理（你当前采用的方案，可用） #

你的现有代码逻辑正确，仅需修正两个小问题即可正常运行：

• 增加空值兜底，避免接口返回空时间戳时转换报错
• 修正排序赋值的笔误，将this.hcDataSource.sort = this.sort改为this.newDataSource.sort = this.sort

优化后的代码：

).subscribe(rawData => {
  const newData: NewData[] = rawData.map(datum => {
    return {
      // 增加空值兜底
      timeStamp: datum.timeStamp ? this.datePipe.transform(datum.timeStamp, 'yyyy MMM dd HH:mm:ss') : '-',
      name: datum.name,
      status: this.showStatusStr(datum.status)
    };
  });
  this.newDataSource = new MatTableDataSource(newData);
  this.newDataSource.paginator = this.paginator;
  // 修正排序绑定的数据源
  this.newDataSource.sort = this.sort;
});

方案2：RxJS map操作符预处理数据流 #

如果需要将数据转换逻辑和渲染逻辑解耦，可以在Observable返回链中提前处理数据：

return this.http.get<data[]>(this.url, { params }).pipe(
  map(rawData => rawData.map(datum => ({
    timeStamp: datum.timeStamp ? this.datePipe.transform(datum.timeStamp, 'yyyy MMM dd HH:mm:ss') : '-',
    name: datum.name,
    status: this.showStatusStr(datum.status)
  })))
).subscribe(processedData => {
  this.newDataSource = new MatTableDataSource(processedData);
  this.newDataSource.paginator = this.paginator;
  this.newDataSource.sort = this.sort;
});

功能验证 #

完成上述处理后，MatTableDataSource默认的模糊筛选逻辑会直接作用于转换后的时间字符串，用户输入"November 26"、"2:05"这类片段都可以正常匹配到对应记录，不需要额外修改筛选配置。

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