28

从版本 5 升级到 6 后，在我的 Angular 应用程序中，使用 DatePipe 时出现此错误。

我正在使用 date_field 的名称保存mat-date- picker 在 Cloud Firestore 中创建的 Date () 对象，当返回时尝试在屏幕上向用户显示但不出现。

我检查了数据库，它保存正确，但我无法在 child_name 字段中的用户屏幕上显示它。

当您尝试在mat-table中显示 date_field 列并使用 DatePipe 格式化日期错误时发生。

下面是 HTML 代码：

<ng-container cdkColumnDef="data_nascimento">
   <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Data de nascimento</mat-header-cell>
   <mat-cell *cdkCellDef="let paciente" fxHide fxShow.gt-xs>
      <p class="text-truncate">{{paciente.data_nascimento | date}}</p>
   </mat-cell>
</ng-container>

升级到 Angular 6 后出现以下错误：

ERROR Error: InvalidPipeArgument: 'Unable to convert "Timestamp(seconds=1531364400, nanoseconds=0)" into a date' for pipe 'DatePipe'
    at invalidPipeArgumentError (common.js:4238)
    at DatePipe.push../node_modules/@angular/common/fesm5/common.js.DatePipe.transform (common.js:5151)
    at checkAndUpdatePureExpressionInline (core.js:10801)
    at checkAndUpdateNodeInline (core.js:11375)
    at checkAndUpdateNode (core.js:11333)
    at debugCheckAndUpdateNode (core.js:11970)
    at debugCheckRenderNodeFn (core.js:11956)
    at Object.eval [as updateRenderer] (PacientesComponent.html:81)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:11948)
    at checkAndUpdateView (core.js:11320)
View_PacientesComponent_10 @ PacientesComponent.html:81
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:12174
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1650
(anonymous) @ core.js:5102
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4030
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:5102
(anonymous) @ core.js:4938
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4071
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3927
next @ core.js:4938
schedulerFn @ core.js:3721
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713
checkStable @ core.js:4040
onHasTask @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
push../node_modules/@firebase/firestore/dist/index.cjs.js.AsyncObserver.scheduleEvent @ index.cjs.js:15061
push../node_modules/@firebase/firestore/dist/index.cjs.js.AsyncObserver.next @ index.cjs.js:15050
push../node_modules/@firebase/firestore/dist/index.cjs.js.QueryListener.raiseInitialEvent @ index.cjs.js:7610
push../node_modules/@firebase/firestore/dist/index.cjs.js.QueryListener.onViewSnapshot @ index.cjs.js:7550
push../node_modules/@firebase/firestore/dist/index.cjs.js.EventManager.onChange @ index.cjs.js:7487
(anonymous) @ index.cjs.js:8572
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
PacientesComponent.html:81 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 4, nodeDef: {…}, elDef: {…}, elView: {…}}
4

5 回答 5

63

如果您从 firebase 获得格式为 Date 的字段，则必须在管道之前使用 toDate() 对其进行转换，例如：

{{paciente.data_nascimento.toDate() | date: 'dd/MM/yyyy'}}
于 2018-05-20T12:24:31.867 回答
4

您传递的参数类型错误。Date 过滤器接受 Date 对象、数字（自纪元以来的毫秒数）和字符串（参见文档）。

我不确定 Timestamp 类型是什么，但看起来它有一个 seconds 属性。

尝试从该对象获取自纪元以来的毫秒数

{{(paciente.data_nascimento.seconds * 1000) | date}}

或者可能有一个内置的方法来获取它

编辑显然，由于您使用的是 Firebase，您可以调用内置toDate方法将 Firebase 对象转换为普通的 JSDate对象

{{paciente.data_nascimento.toDate() | date}}
于 2018-05-19T05:45:57.407 回答
3

用于toDate()在管道之前将 Firebase 时间戳转换为 Javascript Date 对象：

{{ paciente.data_nascimento.toDate() | date }}

于 2018-06-22T11:52:04.410 回答
3

当我调用 Firebase API 并在我的应用程序上显示数据时，我遇到了同样的问题。我只是通过使用如下 toDate() 函数将 Firebase 日期时间转换为 JavaScript 来修复它 -

<mat-cell *matCellDef="let element">{{element.date.toDate() | date}}</mat-cell>

谢谢

于 2018-09-02T01:08:09.810 回答
0

Angular 6 在病房里你必须使用一个函数toDate()。Angular官方网站上还有很多可用的日期管道。您可以在此链接上查看可用的管道和文档。例如，我使用 fullDate 管道。请参阅下面的代码 <h3>Posted By {{blog.author}} &bull; {{blog.published.toDate() | date:'fullDate'}}</h3>。

我希望你能得到答案

于 2020-02-13T17:48:08.427 回答