Angular 5中的时间戳

Posted 2023-03-13

【中文标题】Angular 5中的时间戳

【英文标题】：Timestamp in Angular 5

【发布时间】：2018-12-20 06:38:10

【问题描述】：

我正在使用 Angular 5 进行数据库项目，我正在使用 Firebase。实际上我之前使用过 firebase:'^4.12.1' 并且它对我来说可以正常工作。现在项目的主题发生了变化，因为它面临很多问题，最后我必须更改 firebase 的版本，所有问题都已解决，但面临时间戳问题。 下面是我的代码..

.html

<ng-container matColumnDef="startdate">
          <mat-header-cell *matHeaderCellDef mat-sort-header><b>Start Date</b> </mat-header-cell>
          <mat-cell *matCellDef="let item"> item.itemCategoryRows.startdate | date: 'dd/MM/yyyy' </mat-cell>
        </ng-container>

      <ng-container matColumnDef="enddate">
      <mat-header-cell *matHeaderCellDef mat-sort-header><b>End Date </b> </mat-header-cell>
      <mat-cell *matCellDef="let item"> item.itemCategoryRows.enddate | date:'mediumDate' </mat-cell>
    </ng-container>

【问题讨论】：

你能检查一下你以哪种格式获取日期，chrome（浏览器）控制台中显示什么错误？

item.itemCategoryRows.startdate的数据是什么

@PiniCheyni 点击查看详细信息时，这是控制台中的错误错误：InvalidPipeArgument: 'Timestamp(seconds=1531681200, nanoseconds=0)' for pipe 'DatePipe' at invalidPipeArgumentError

@KrishnaRathore 我正在使用响应式表单 itemCategoryRows 是一个数组，而 item 是另一个用于在从 firebase 获取数据后存储数据的 startdate 是 formControlName of filed

@Naeem 我有回复。

【参考方案1】：

你可以使用这个item.itemCategoryRows.startdate * 1000 | date: 'dd/MM/yyyy'

并在时间戳中乘以1000。

我在Stackblitz创建了一个演示

<ng-container matColumnDef="startdate">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
        <b>Start Date</b>
    </mat-header-cell>
    <mat-cell *matCellDef="let item"> item.itemCategoryRows.startdate * 1000 | date: 'dd/MM/yyyy' </mat-cell>
</ng-container>

<ng-container matColumnDef="enddate">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
        <b>End Date </b>
    </mat-header-cell>
    <mat-cell *matCellDef="let item"> item.itemCategoryRows.enddate * 1000 | date:'mediumDate' </mat-cell>
</ng-container>

【讨论】：

使用您的代码从控制台中删除了时间戳错误，但无法正常工作。日期不显示在网格中。

我将在 Stackblitz 上创建演示

我在Stackblitz - stackblitz.com/edit/…创建了一个演示

【参考方案2】：

这是因为 Firebase javascript SDK 发生了重大变化，其中日期保存在数据库中并作为 firebase.firestore.Timestamp 对象返回。

在 Timestamp 类中，有一个 toDate 方法将对象转换为原生 JavaScript Date。

<ng-container matColumnDef="startdate">
      <mat-header-cell *matHeaderCellDef mat-sort-header><b>Start Date</b> </mat-header-cell>
      <mat-cell *matCellDef="let item"> item.itemCategoryRows.startdate.toDate() | date: 'dd/MM/yyyy' </mat-cell>
    </ng-container>

  <ng-container matColumnDef="enddate">
  <mat-header-cell *matHeaderCellDef mat-sort-header><b>End Date </b> </mat-header-cell>
  <mat-cell *matCellDef="let item"> item.itemCategoryRows.enddate.toDate() | date:'mediumDate' </mat-cell>
</ng-container>