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

【问题标题】：Angular DatePipe show new Date data from APIAngular DatePipe 显示来自 API 的新日期数据
【发布时间】：2021-04-03 11:18:35
【问题描述】：

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

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>

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

邮政服务

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

【问题讨论】：

标签： angular rest date-pipe

【解决方案1】：

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

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

【讨论】：

没有差异，即使在 html 中使用管道，我仍将是当前日期，即今天的日期。那是因为调用了新的日期。所以问题实际上是我如何在调用方法中从 PostPayload 正确实例化字段 createdOn，而不使用 new Date()。

【解决方案2】：

您没有使用服务中的日期，但您正在实例化 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');
          }

【讨论】：

PostService 'getPost(permaLink: number): Observable { return this.http.get(this.url + 'get/' + permaLink); }' 再一次，我从该日期的邮政服务中恢复我的正确性没有问题。如果我不使用 DatePipe，它会显示正确的日期。
但正如我所说，您根本没有使用您的邮政服务和getPost。不在您在帖子中显示的代码中。
我正在使用 getPost，我已经编辑了我的帖子并添加了代码的 concuming 部分，现在您有了完整的代码。但是这段代码没有必要显示，因为它很明显。就像我说的那样，它可以在没有 DatePipe 的情况下工作。

【解决方案3】：

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

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

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

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

【讨论】：