如何使用日期管道以角度格式化日期数组？答案

【问题标题】：How to format an array of dates using datepipe in angular?如何使用日期管道以角度格式化日期数组？
【发布时间】：2019-06-21 03:55:44
【问题描述】：

我有一个日期数组，它会像

      [
        "2019-06-17 09:21:20+05:30",
        "2019-06-18 09:21:20+05:30",
        "2019-06-19 09:21:20+05:30",
        "2019-06-20 09:21:20+05:30"
      ]

如何使用日期管道将其转换为日期时间。

【问题讨论】：

标签： typescript angular7 date-pipe

【解决方案1】：

将 DatePipe 导入您的 app.module 文件 import { DatePipe} from '@angular/common'

并使用此Pre-defined format options 格式化您的日期对象

并将此代码包含到您的 app.component.html 页面中

{{ DateObjectValue | date:'medium'}}

查看附加的 stackblitz 示例链接：FormatDateExample

【讨论】：

我这样做是为了图表目的。所以可以在打字稿本身中转换它。这就是我需要的。

【解决方案2】：

你可以像这样使用管道

TS 文件

export class AppComponent  {
  yourdate =   [
        "2019-06-17 09:21:20+05:30",
        "2019-06-18 09:21:20+05:30",
        "2019-06-19 09:21:20+05:30",
        "2019-06-20 09:21:20+05:30"
      ];
}

HTML 文件

<div *ngFor="let item of yourdate">
  {{item | date:'yyyy-MM-dd hh:mm'}}
</div>

https://stackblitz.com/edit/angular-date-pipe-array?file=src/app/app.component.html

【讨论】：

【解决方案3】：

StackBliz 来了 https://stackblitz.com/edit/angular-bvpg4r

1) 导入日期管道：

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

2) 在模块的提供者中包含 DatePipe：

NgModule({
  providers: [DatePipe]
})
export class AppModule {
}
or component's providers:

@Component({
  selector: 'home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
  providers: [DatePipe]
})
export class HomeComponent {
...

3) 像任何其他服务一样将其注入到组件的构造函数中：

constructor(private datePipe: DatePipe) {
}

4) 使用它：

ngOnInit() {
     data=this.datePipe.transform("2019-06-20 09:21:20+05:30", 'yyyy-dd-MM');
}

【讨论】：

我需要在打字稿中显示..在图表中显示。我正在使用 datepipe.so 如何使用 datepipe 作为日期数组。
@minnu 请检查编辑后的代码希望这就是你要找的
我有一个日期数组..我需要循环数组吗？或任何其他方式
是的，当然循环数组并将转换后的日期推送到新数组中