Angular DatePipe 显示来自 API 的新日期数据

编程问答 2022-05-15

问题描述

这个问题我想豆子以前问过很多次了。我已经在我的 angular 项目中实现了 DatePipe，格式是正确的，只是它显示了当前日期，这不是我想要的，也不是我从我的休息服务收到的日期。我从 REST 服务 (createdOn) 获得一个过去的日期。这是我的代码：

TS

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

export class PostComponent implements OnInit {
post: Postpayload;
newDateFormat: string;
constructor(private router: ActivatedRoute,private postService: PostService,public datepipe: DatePipe) {
            this.post = {
              createdOn: new Date()
            };
            this.newDateFormat = this.datepipe.transform(this.post.createdOn,'dd-MM-yyyy');
         }
 }

后有效载荷

export class Postpayload {
id: number;
content: string;
title: string;
username: string;
createdOn: Date;

}

ngOnInit(): void {
this.router.params.subscribe( params => {
  this.permaLink = params.id;
});
  this.postService.getPost(this.permaLink).subscribe( (  data:Postpayload) 
  => {
  this.post = data;
   },(err: any) => {
    console.log(err);
    console.log('failure response');
   });
  }

HTML

<p>{{ newDateFormat }}</p>

这给我一个当前日期或今天的日期，我的问题是如何格式化从我的 rest Api 服务调用中收到的 this.post.createdOn 的日期。当我不使用 DatePipe 时，它​​会显示正确的日期，但我不想要这种默认的完整样式日期格式。

邮政服务

getPost(permaLink: number): Observable<Postpayload> {
return this.http.get<Postpayload>(this.url + 'get/' + permaLink);
}

解决方法

我知道你在课堂上使用日期管道，但你能把它移到你的 dom 上吗？

<p>{{ newDateFormat | date:"dd-MM-yyyy" }}</p>
,

您没有使用服务中的日期，而是实例化 new Date 实例。您在这里所做的正是 new Date() 所期望的 - 设置当前日期。实际上，要从 Service 获取数据，您应该向我们展示您的 postService 是如何实现的。所以调用可能是这样的，假设来自服务的 getPost 返回 Observable：

         postService.getPost().subscribe( (postPayload) => {
                this.post = {
                   createdOn: postPayload.createdOn
                };
                this.newDateFormat =this.datepipe.transform(this.post.createdOn,'dd-MM-yyyy');
          }
,

所以我已经解决了我的问题，对于那些仍然感兴趣的人。

我决定直接在 HTML 中使用 DatePipe。

{{ post.createdOn |日期：'mediumDate'}}

在 component.ts 中，我根本不使用 new Date() 实例化 createdOn。我还将 Postpayload 中的 createdOn 更改为输入 any。

在我的 Web 应用程序的后端，我通过在字段 createdOn 上添加 @JsonFormat(pattern="MM-dd-yyyy") 改进了 json，如果我不使用 JsonFormat，DatePipe 将无法正确格式化。

angularangulardate-piperestrest