Angular date pipe格式化服务端UTC日期显示错误，日期偏移一天

问题产生原因 #

• 你从服务端获取的日期2021-10-08T23:47:34.000Z末尾的Z代表该时间是UTC标准时区的时间
• Angular内置的date管道默认会将传入的时间转换为用户当前设备的本地时区进行格式化：比如设备时区为东八区（UTC+8）时，UTC时间10月8日23:47加8小时就会得到10月9日07:47，最终就会显示为Oct 9, 2021

解决方法 #

方法1：指定date管道使用UTC时区格式化 #

直接在date管道的参数中指定时区为UTC即可，无需修改其他逻辑，修改后代码如下：

<ng-container matColumnDef="created_at">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">
        {{ element.created_at | date:undefined:'UTC' }}
      </td>
</ng-container>

第一个参数留空会使用默认的日期格式，第二个参数指定时区为UTC后，就能输出UTC时间对应的Oct 8, 2021。

方法2：统一时区处理逻辑 #

如果业务要求所有地区用户看到的时间完全一致，可以在服务端返回时间时就转换为目标时区的时间字符串，或者前端拿到时间后先统一做时区转换再交给管道格式化，避免不同地区用户显示结果不一致。

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