DatePipe в Angular не работает при преобразовании метки времени в человеческие форматы даты

В настоящее время я создаю веб-приложение, которое будет использовать REST API для GET / POST данных в postgreSQL из пользовательского интерфейса, используя Angular CLI, node.js и TypeScript. У меня есть несколько полей даты, которые необходимо преобразовать в удобочитаемый формат из временной метки unix, поэтому я выбрал метод DatePipe для выполнения этой работы. Но странно то, что временная метка unix преобразуется в неправильную дату и время с помощью DatePipe.

Я ответил на несколько вопросов в Интернете и Stackoverflow, связанных с этим, но ничего не помогло. Поэтому я решил опубликовать свой фрагмент кода и снова выпустить его здесь.

My Component.ts, соответствующий странице ИЗМЕНИТЬ

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'])
      })
    }
  }

}

inventory-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 немного прост для выполнения моей задачи, но безуспешно. Прежде чем перейти к следующему подходу, я действительно хочу понять, почему это происходит.

Может ли кто-нибудь помочь мне в решении этой проблемы или понять, почему это происходит? Это связано с настройками браузера?


person Amareesh    schedule 18.05.2020    source источник


Ответы (1)


В вашей базе данных postgreSQL используются временные метки в секундах, а в javascript Date используются временные метки в миллисекундах.

person HTN    schedule 18.05.2020
comment
Отлично, я просто попытался умножить отметку времени, которую я получаю от postgreSQL, на 1000, чтобы преобразовать в миллисекунды, и тогда это сработало как шарм. :) Большое спасибо, и это хорошее обучение. - person Amareesh; 18.05.2020