Question

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

我正在保存mat-date-picker在Cloud Firestore中创建的Date（）对象，其名称为date_field，当返回时尝试在屏幕上显示给用户但未显示。

我检查了数据库并且保存正确，但是我无法在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: {…}}

Answer 1

如果你从firebase获得格式为Date的字段，你必须在管道之前用toDate（）转换它，例如：

{{paciente.data_nascimento.toDate() | date: 'dd/MM/yyyy'}}

Answer 2

你传递的错误类型的论点。 Date过滤器接受Date对象，数字（自纪元以来的毫秒数）和字符串（请参阅documentation）。

我不确定时间戳类型是什么，但看起来它有秒属性。

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

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

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

修改显然，由于您使用的是Firebase，因此可以调用内置的toDate方法将Firebase对象转换为普通的JS Date对象

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

Answer 3

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

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

Answer 4

当我调用Firebase API并在我的应用程序上显示数据时，我遇到了同样的问题。我通过使用以下toDate（）函数将Firebase日期时间转换为JavasScript来解决此问题-

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

谢谢

Answer 5

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

希望您能得到答案

DatePipe在Angular 6中无法正常工作

5 个答案: