时间戳

首页 > 解决方案 > 我正在尝试使用角管格式化日期，但它不起作用

angular - 我正在尝试使用角管格式化日期，但它不起作用

问题描述

我在 Angular 7 中使用日期管道显示日期时遇到问题。

我试过使用 格式化它date : 'dd/MM/yyyy'，但这没有任何作用。

我也尝试将其保留为date，但这也无济于事。

它显示如下：

Mon Oct 12 1992 00:00:00 GMT-0500 (Central Daylight Time)

HTML：

{{employee.dateOfBirth | date : 'dd/MM/yyyy'}}

.ts：

dateOfBirth: Date
dateOfBirth: new Date ('10/12/1992')

不知道发生了什么。

我希望日期以下列格式显示：dd/MM/yyyy

这是我的 HTML 文件：

<div class="panel panel-primary" *ngFor="let employee of employees">
  <div class="panel-heading">
    <h3 class="panel-title">{{employee.name}}</h3>
  </div>
  <div class="panel-body">
    <div class="col-xs-10">
      <div class="row">
        <div class="col-xs-4">
          <img class="imageClass" [src]="employee.photoPath" />
        </div>
        <div class="col-xs-8">

          <div class="row">
            <div class="col-xs-6 col1Title">
              Gender
            </div>
            <div class="col-xs-6">
              : {{employee.gender}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Date of Birth
            </div>
            <div class="col-xs-6">
              : {{employee.dateOfBirth | date: 'dd/mm/yyyy' }}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Email
            </div>
            <div class="col-xs-6">
              : {{employee.email}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Phone Number
            </div>
            <div class="col-xs-6">
              : {{employee.phoneNumber}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Contact Preference
            </div>
            <div class="col-xs-6">
              : {{employee.contactPreference}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Date of Birth
            </div>
            <div class="col-xs-6">
              : {{employee.dateOfBirth}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Department
            </div>
            <div class="col-xs-6">
              : {{employee.department}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col1Title">
              Is Active
            </div>
            <div class="col-xs-6">
              : {{employee.isActive}}
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

这是我的 .ts 文件：

import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/employee.model';

@Component({
  templateUrl: './list-employees.component.html',
  styleUrls: ['./list-employees.component.css']
})
export class ListEmployeesComponent implements OnInit {

  employees: Employee[] = [
    {
      id: 1,
      name: 'Mark',
      gender: 'Male',
      contactPreference: 'Email',
      email: 'emp1@fedex.com',
      dateOfBirth: new Date ('10/12/1992'),
      department: 'IT',
      isActive: true,
      photoPath: 'assets/images/emp1.png'
    },
    {
      id: 2,
      name: 'Marty',
      gender: 'Male',
      contactPreference: 'Phone',
      phoneNumber: 7871234452,
      email: 'emp2@fedex.com',
      dateOfBirth: new Date ('05/13/1987'),
      department: 'HR',
      isActive: true,
      photoPath: 'assets/images/emp2.png'
    },
    {
    id: 2,
    name: 'John',
    gender: 'Male',
    contactPreference: 'Phone',
    phoneNumber: 7870123421,
    email: 'emp3@fedex.com',
    dateOfBirth: new Date('02/22/1990'),
    department: 'IT',
    isActive: true,
    photoPath: 'assets/images/emp3.png'
    }
  ];

  constructor() { }

  ngOnInit() {
  }

}

Even with {{employee.dateOfBirth | date: 'dd/mm/yyyy' }}
the date displays as Mon Oct 12 1992 00:00:00 GMT-0500 (Central Daylight Time)

标签： angularvisual-studiotypescript

解决方案

您将值分配给“dateOfBirth”的方式不正确。你应该像这样分配它

dateOfBirth: Date = new Date ('10/12/1992');

或者，如果您希望它是动态的，您可以在 ngOnInit 方法中分配值。在您的模板中，它应该如下所示。

{{dateOfBirth | date : 'dd/MM/yyyy'}}

这是一个有效的 StackBlitz 示例：https ://stackblitz.com/edit/angular-bqmbzd?file=src%2Fapp%2Fapp.component.html

推荐阅读