如何使用角度日期管道转换firebase时间戳

Question

我试图在模板视图中显示一些firebase时间戳,不幸的是没有运气角度datePipe.

<p>Seen {{user.updatedAt | date: 'yyyy/MM/dd h:mm:ss a'}}</p>

我确实得到了这个错误:

     ERROR Error: InvalidPipeArgument: 
'Unable to convert "Timestamp(seconds=1528515928, nanoseconds=105000000)" 
into a date' for pipe 'DatePipe

Answer 1

我在 Angular 中使用简单的自定义管道。它考虑了 LOCALE_ID，您还可以使用所有 DatePipe 格式：

import {formatDate} from '@angular/common';
import {Inject, LOCALE_ID, Pipe, PipeTransform} from '@angular/core';
import firebase from 'firebase/app';
import Timestamp = firebase.firestore.Timestamp;

@Pipe({
    name: 'firestoreDate'
})
export class FirestoreDatePipe implements PipeTransform {

    constructor(@Inject(LOCALE_ID) private locale: string) {
    }

    transform(timestamp: Timestamp, format?: string): string {
        if (!timestamp?.toDate) {
            return;
        }
        return formatDate(timestamp.toDate(), format || 'medium', this.locale);
    }
}

在 Angular 7 - 10 中测试。

Answer 2

试试这个{{ user.updatedAt.seconds * 1000 | date:'MM-dd-yyyy' }},时间戳有一个秒属性,所以你需要访问它,然后进行乘法和管道.希望它适用于您的情况.

Answer 3

您可以捕获服务中的所有 Timestamp 属性并将其全部转换为日期。

例如：

import { firestore } from 'firebase/app';
import Timestamp = firestore.Timestamp;

// for Angular 11 use:
// import firebase from 'firebase'; 
// import Timestamp = firebase.firestore.Timestamp; 

@Injectable()
export class YourService {

....

    list = (): Observable<any[]> => this.collection
        .snapshotChanges()
        .pipe(
            map(changes => {
                return changes.map(a => {
                    const data = a.payload.doc.data() as any;
                    Object.keys(data).filter(key => data[key] instanceof Timestamp)
                        .forEach(key => data[key] = data[key].toDate())
                    data._id = a.payload.doc.id;
                    return data;
                });
            })
        );

...
}

Answer 4

您可以将时间戳转换为毫秒或日期：

<p>Seen {{user.updatedAt.toMillis() | date:'yyyy/MM/dd h:mm:ss a'}}</p>

要么

<p>Seen {{user.updatedAt.toDate() | date:'yyyy/MM/dd h:mm:ss a'}}</p>

Answer 5

显示的时间是时间戳而不是实际日期。你需要将时间乘以1000。

<p>Seen {{user.updatedAt * 1000 | date:'MM-dd-yyyy'}}</p>