Angular Firebase将时间戳检索为日期

Question

我目前正在运行一个以Firebase作为无服务器后端的Angular项目。应用程序中有两个主要模型user和product。这两个模型都有几个不同的时间戳，如createdAt、updatedAt、lastPurchase。。。

interface User {
id: string;
displayName: string;
lastPurchase?: Date;
createdAt: Date;
updatedAt?: Date;
}

interface Product{
id: string;
title: string;
pricing: number;
category: string;
user: User;
createdAt: Date;
updatedAt?: Date;
}

问题是，我使用的是Date类型，但Firebase提供的存储日期与t {seconds: 1584540876, nanoseconds: 300000000}类似。因此，我不得不将所有传入的Firebase时间戳转换为JavaScriptDate类型。此外，由于Firebase的Firestore是一个NoSQL数据库，我永远无法确定哪个文档包含哪些时间戳属性(用于空检查(。

这是我从Firestore检索数据时使用的当前工作代码，但它相当混乱。

// Iterate over all properties in product
for (let key in data) {
// Check if property is an object
if (data[key] instanceof Object) {
// Check if the object is Firebase Timestamp
if (data[key].constructor.name === 't') {
const property: string = key;
console.log(data[key]);
data[key] = data[property].toDate();
// Check if property is an user
} else if (key === 'user') {
// Iterate over all user properties
for (let userKey in data[key]) {
// Check if user property is an object and the object is Firebase Timestamp
if (data[key][userKey] instanceof Object && data[key][userKey].constructor.name === 't') {
const userProperty: string = userKey;
data[key][userKey] = data[key][userProperty].toDate();
}
}
}
}
}

有没有一种替代的解决方案/方法可以用更少的计算来实现这一点？

Answer 1

当您想要显示日期时，只需使用angular的日期管道。

<div>{{user.updatedAt.toDate() | date: 'medium'}}</div>

日期管道还有其他选项，如完整、简短。

您可以使用firebase时间戳来存储日期。你可以这样使用它们：

import { firebase } from 'firebase/app';
import Timestamp = firestore.Timestamp;
interface User {
id: string;
displayName: string;
lastPurchase?: Timestamp;
createdAt: Timestamp;
updatedAt?: Timestamp;
}

然后，当你更新它们时，你可以使用现在的功能：

User.update({
updatedAt: Timestamp.now();
})

这将在您可以将函数更新时保存updatedAt。您可以类似地更新createdAt和其他日期。

Answer 2

我一直在努力解决同样的问题，最终找到了这个解决方案。设置

interface User {
id: string;
displayName: string;
lastPurchase?: MyDate;
createdAt: MyDate;
updatedAt?: MyDate;
},

然后创建类MyDate

export class MyDate {
seconds: number;
}

在你的代码中设置这个

<div>{{user.updatedAt.seconds * 1000 | date: 'MM/dd/yyyy'}}</div>