如何解决Angular DatePipe 显示来自 API 的新日期数据
这个问题我想豆子以前问过很多次了。我已经在我的 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 将无法正确格式化。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。