Angular 中的 DatePipe 在将时间戳转换为人类日期格式时不起作用

Question

我目前正在创建 Web 应用程序，它将使用 REST API 到 GET/POST 数据到 postgreSQL 从 UI 使用 Angular CLI, node.js 和 TypeScript。我有几个日期字段需要从 unix 时间戳转换为人类可读格式，所以我选择 DatePipe 方法来完成这项工作。但奇怪的是 unix 时间戳被 DatePipe 转换为错误的日期和时间。

我已经在网络和 Whosebug 中解决了几个与此相关的问题，但没有任何帮助。所以我决定post我的一段代码并在这里再次发布。

我的Component.ts对应EDIT页面

import { Component, OnInit } from '@angular/core';
import { RestApiService } from "../shared/rest-api.service";
import { ActivatedRoute, Router } from '@angular/router';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-inventory-details',
  templateUrl: './inventory-edit.component.html',
  styleUrls: ['./inventory-edit.component.css'],
  providers: [DatePipe]
})

export class InventoryEditComponent implements OnInit {
  id = this.actRoute.snapshot.params['id'];
  inventoryData: any = {};

  constructor(
    public restApi: RestApiService,
    public actRoute: ActivatedRoute,
    public router: Router,
    public datepipe: DatePipe
  ) { 
  }

  ngOnInit() { 
    console.log("id value is"+ this.id)
    this.restApi.getInventory(this.id).subscribe((data: {}) => {
      this.inventoryData = data[0];
      console.log('the date element is ' +this.inventoryData.warranty_date)
      this.inventoryData.warranty_date = this.datepipe.transform(this.inventoryData.warranty_date, 'yyyy-MM-dd');
      this.inventoryData.purchased_date = this.datepipe.transform(this.inventoryData.purchased_date, 'yyyy-MM-dd');
      console.log('the date element is ' +this.inventoryData.warranty_date)
      console.log(JSON.stringify(data))
    })
  }

  // Update inventory data
  updateInventory() {
    if(window.confirm('Are you sure, you want to update?')){
      this.restApi.updateInventory(this.inventoryData).subscribe(data => {
        this.router.navigate(['/inventory-list'])
      })
    }
  }

}

库存-edit.component.html

<div class="container custom-container">
  <div class="col-md-12">

    <h3 class="mb-3 text-center">Update Inventory</h3>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Device Name</label>
      <input type="text" [(ngModel)]="inventoryData.device_name" class="form-control" placeholder="Device Name">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Device Type ID</label>
      <input type="text" [(ngModel)]="inventoryData.device_type_id" class="form-control" placeholder="Device Type ID">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Serial No</label>
      <input type="text" [(ngModel)]="inventoryData.serial_no" class="form-control" placeholder="Serial No">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Model</label>
      <input type="text" [(ngModel)]="inventoryData.model" class="form-control" placeholder="MODEL">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">RAM ID</label>
      <input type="text" [(ngModel)]="inventoryData.ram_id" class="form-control" placeholder="RAM ID">
    </div>

    <div class="form-group"><div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">HDD ID</label>
      <input type="text" [(ngModel)]="inventoryData.hdd_id" class="form-control" placeholder="HDD ID">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Processor</label>
      <input type="text" [(ngModel)]="inventoryData.processor" class="form-control" placeholder="Processor">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">OS ID</label>
      <input type="text" [(ngModel)]="inventoryData.os_id" class="form-control" placeholder="OS ID">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Warranty Date</label>
      <input type="date" [(ngModel)]="inventoryData.warranty_date" class="form-control" placeholder="Warranty Date">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Purchase Date</label>
      <input type="date" [(ngModel)]="inventoryData.purchased_date" class="form-control" placeholder="Purchased Date">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Description</label>
      <input type="text" [(ngModel)]="inventoryData.description" class="form-control" placeholder="Description">
    </div>

    <div class="col-md-12 form-group form-inline">
      <label class="col-sm-3">Repair</label>
      <input type="text" [(ngModel)]="inventoryData.repair" class="form-control" placeholder="Repair">
    </div>

    <div class="form-group">
      <button class="btn btn-success btn-lg btn-block" (click)="updateInventory()">Update Inventory</button>
    </div>

  </div>
</div>

我面临的问题

I'm getting below timestamps from postgreSQL DB which I want to convert
warranty_date: 1583778600
purchased_date: 1584037800

After converting the timestamps, I'm getting below results which is completely wrong
warranty_date: 01/19/1970
purchased_date: 01/19/1970

But expected results should be
warranty_date: 3/10/2020
purchased_date: 3/13/2020

我什至通过仅拉取时间戳而不进行转换来仔细检查，以查看预期的时间戳是否反映在我的代码中，并且在 DatePipe 出现之前一切似乎都很好。

我不确定我当前的代码中犯了什么错误。在浏览了几个博客和在线示例后，我发现这个 DatePipe 方法很容易完成我的任务，但运气不好。在继续下一个方法之前，我真的很想了解为什么会这样。

有人可以帮我解决这个问题或了解为什么会这样吗？这与浏览器设置有关吗？

Answer 1

您的 postgreSQL 数据库使用秒的时间戳，但是 javascript 日期使用毫秒 .

的时间戳

Angular 中的 DatePipe 在将时间戳转换为人类日期格式时不起作用

DatePipe in Angular doesn't work while converting timestamp to human date formats

typescript

date-pipe

angular