Angular中异步获取的Date类型值如何通过moment()转换为指定日期格式

你需要的日期格式化需求可以通过moment实现，两种方案具体操作如下： #

方案1：ts文件中通过moment预处理数据 #

操作步骤 #

1. 安装moment依赖

npm install moment

2. 修改home.component.ts文件，引入moment后在获取数据时统一格式化日期字段
   修改后的代码如下：

import { Component, OnInit } from '@angular/core';
import { INews } from 'src/app/shared/models/news';
import { NewsService } from 'src/app/shared/services/news.service';
import {environment} from '../../../environments/environment';
// 引入moment
import * as moment from 'moment';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private ns: NewsService) { }

  News : INews[]=[];

  ngOnInit(): void {
    this.ns.getAll().subscribe(News => {
       // 遍历处理每个新闻的日期，格式化为YYYY-MM-DD
       this.News = News.sort((a, b) => a.id - b.id).map(item => {
         // 可直接覆盖原date字段，也可以新增字段如formattedDate存储格式化后的值
         item.date = moment(item.date).format('YYYY-MM-DD');
         return item;
       });
    });
  }

}

3. 模板无需修改，直接使用{{n.date}}即可展示格式化后的日期

方案2：直接在HTML文件中解析 #

这里提供两种实现方式，第一种是Angular原生管道无需额外安装依赖，第二种是基于moment的管道实现：

方式1：使用Angular自带DatePipe（更轻量，推荐） #

只要你当前组件所属的模块已经导入了CommonModule，直接修改模板中的日期渲染部分即可：

<td>{{n.date | date:'yyyy-MM-dd'}}</td>

方式2：在模板中使用moment管道 #

如果项目已经在使用ngx-moment，可以直接用管道在模板格式化：

1. 安装依赖

npm install moment ngx-moment

2. 在所属模块导入MomentModule

import { MomentModule } from 'ngx-moment';

@NgModule({
  imports: [
    // 其他导入
    MomentModule
  ]
})

3. 修改模板代码

<td>{{n.date | amDateFormat:'YYYY-MM-DD'}}</td>

注意事项 #

如果需要适配时区，可在moment的format方法、或Angular DatePipe中传入时区参数调整输出结果。

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