Angular中如何转换GET接口返回所有对象的日期格式为DD-MM-YYYY

API 探路者

2026-11-6

Angular 中格式化ISO日期为DD-MM-YYYY的可落地方案

针对新手场景优先选零额外依赖、和Angular生态适配的实现方式，常用的有两种：

方案1：用Angular官方内置DatePipe（最推荐）
这是Angular自带的能力，不需要额外安装第三方库，只要导入了CommonModule就可以直接用，分两种使用场景：
1. 仅做页面展示的场景：直接在模板里通过管道符格式化，不修改接口返回的原始数据
  模板写法参考：
```
<div *ngFor="let item of data">
  <p>发布日期：{{ item.IssueDate | date: 'dd-MM-yyyy' }}</p>
  <p>过期日期：{{ item.ExpiryDate | date: 'dd-MM-yyyy' }}</p>
</div>
```
  如果需要固定时区（避免本地时区偏移导致日期算错），可以给管道加时区参数，比如统一按UTC转：{{ item.IssueDate | date: 'dd-MM-yyyy': 'UTC' }}
2. 需要把格式化后的值传给其他组件、存入表单的场景：在TS层拿到接口返回值后统一预处理
  先在组件里注入DatePipe：
```
import { DatePipe } from '@angular/common';

// 组件构造函数
constructor(private datePipe: DatePipe) {}
```
  拿到接口响应后遍历数组，替换两个日期字段的值：
```
// 替换掉原本直接赋值this.data = res的逻辑
this.data = res.map(item => ({
  ...item,
  // transform方法第二个参数就是你要的输出格式
  IssueDate: this.datePipe.transform(item.IssueDate, 'dd-MM-yyyy'),
  ExpiryDate: this.datePipe.transform(item.ExpiryDate, 'dd-MM-yyyy')
}));
```
  注意：传统NgModule写法只要组件所属模块导入了CommonModule，就可以正常注入DatePipe，不需要额外配置；Angular14+的Standalone组件直接在组件的imports数组里引入DatePipe即可使用。
方案2：手动解析固定结构的ISO字符串
因为接口返回的ISO日期是标准格式YYYY-MM-DDTHH:mm:ss.xxx，可以直接截取对应字符拼接，完全避开Date对象的时区解析坑：
先写个简单的格式化工具函数：
```
/**
 * 解析标准ISO格式字符串为DD-MM-YYYY格式
 */
function formatIsoToShortDate(isoStr: string): string {
  // 拆分出T前面的日期段，拆成年、月、日
  const [year, month, day] = isoStr.split('T')[0].split('-');
  return `${day}-${month}-${year}`;
}
```
同样在拿到接口数据后遍历替换字段：
```
this.data = res.map(item => ({
  ...item,
  IssueDate: formatIsoToShortDate(item.IssueDate),
  ExpiryDate: formatIsoToShortDate(item.ExpiryDate)
}));
```
这种方式的优点是完全不依赖Angular的能力、也不会有时区解析偏差，缺点是如果接口返回的ISO格式有变动（比如缺了时间部分、格式不标准）就容易解析出错，适合接口返回格式完全可控的场景。

新手容易踩的坑提醒：
不要直接通过new Date(isoStr)解析后手动拼字符串，不同浏览器、不同用户本地时区下，很容易出现日期偏移（比如本来是25号，转完变成24号）的问题
如果后续需要基于日期做计算（比如判断是否过期、计算剩余有效期），不要提前把原始ISO字符串替换掉，尽量保留原始值，仅在页面展示时做格式化，避免后续反向解析增加额外工作量

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