Angular:在typecript中格式化日期数组的例子

在这篇文章中，你将学习如何在Angular应用程序中格式化带有日期键的对象阵列。有些时候，你会从后台获得数据，将这些数据保存在带有日期属性的对象数组中，所以你想格式化日期字段并显示给用户。

在这个例子中，下面的数组对象被声明为带有createdDate日期字段。

这是在Typescript文件中声明的，但在实时情况下，该对象是从服务中返回的:

  employees = [{
    name: "Franc",
    id: "E1",
    createdDate: "2019-10-15T18:30:00.000Z",
  },
  {
    name: "John",
    id: "E3",
    createdDate: "2021-10-15T18:30:00.000Z",
  }
  ]

下面是一个在组件和HTML中格式化日期的例子。

模板是Angular的HTML代码，用户可以在页面上看到。

Angular提供内建的日期管道来格式化日期。Angular中的管道功能可以转换日期。

这种方法很简单，不需要导入任何类。

语法

{{dataValue | date:"formatoptions"}}

dataValue是一个new Date()类型的对象。

你可以看到更多关于datePipe的选项

雇员对象使用*ngFor指令进行迭代，打印对象的角度插值，日期对象的值被格式化为 "yyyy-MMM-dd"。

<div *ngFor="let employee of employees">
    {{employee.name}} {{employee.createdDate | date:'yyyy-MMM-dd '}}
</div>

你会在输出中看到

Franc 2019-Oct-16
John 2021-Oct-16

首先，在应用程序模块中导入DatePipe，如果没有配置，你会在控制台看到以下错误

** NullInjectorError。没有DatePipe的提供者!**

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [**DatePipe**],
  bootstrap: [AppComponent]
})
export class AppModule { }

在构造函数中，添加私有的datePipe。DatePipe的组件。

使用map方法遍历一个对象，使用this.datePipe.transform方法格式化日期值。

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading = 'angular convert array dates example';

  employees = [{
    name: "Franc",
    id: "E1",
    createdDate: "2019-10-15T18:30:00.000Z",
  },
  {
    name: "John",
    id: "E3",
    createdDate: "2021-10-15T18:30:00.000Z",
  }
  ];

  newEmployees: any[];


  constructor(private datePipe: DatePipe) {
    this.newEmployees = [];
  }
  ngOnInit() {
    console.log(this.newEmployees)

    this.employees.map((employee) => {
      this.newEmployees.push({
        id: employee.id, name: employee.name, createdDate: this.datePipe.transform(employee.createdDate, 'yyyy-dd-MMM')
      })
    })
    console.log(this.newEmployees)
  }

  submit() {
  }

}

在html模板中，迭代并显示值

<div *ngFor="let employee of newEmployees">
    {{employee.name}} {{employee.createdDate }}
</div>

在浏览器中看到的输出是

Franc 2019-16-Oct
John 2021-16-Oct

总结

在本教程中，你学会了在typescript和模板html文件中格式化日期对象阵列。