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