web-dev-qa-db-fra.com

DatePipe ne fonctionne pas correctement dans Angular 6

Dans mon application Angular après la mise à niveau de la version 5 à la version 6, cette erreur se produit lors de l'utilisation de DatePipe.

J'enregistre un objet Date () que le mat-date-picker crée dans le Cloud Firestore avec le nom du champ date_field. Une fois renvoyé, essayez de l'afficher à l'écran mais ne s'affiche pas.

J'ai vérifié la base de données et elle enregistre correctement, mais je ne peux pas l'afficher à l'écran pour l'utilisateur dans le champ nom_enfant.

Lorsque vous essayez d'afficher la colonne date_field dans mat-table et utilisez DatePipe pour formater l'erreur de date.

Ci-dessous le code 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>

Après la mise à niveau vers Angular 6, l'erreur suivante se produit:

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: {…}}
angularfirebasedatepipegoogle-cloud-firestore
7
Luiz Ricardo Cardoso

Si vous avez un champ au format Date de Firebase, vous devez le convertir avec toDate () avant votre pipe, par exemple:

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

Vous passez le mauvais type d'argument. Le filtre Date accepte les objets Date, les nombres (nombre de millisecondes depuis Epoch) et la chaîne (voir documentation ).

Je ne suis pas sûr du type d'horodatage, mais on dirait qu'il a une propriété secondes.

Essayer d'obtenir le nombre de millisecondes depuis Epoch à partir de cet objet 

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

Ou il pourrait y avoir une méthode intégrée pour l'obtenir

Edit Apparemment, puisque vous utilisez Firebase, vous pouvez appeler la méthode intégrée toDate pour convertir l'objet Firebase en un objet JS Date simple.

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

J'étais confronté au même problème lorsque j'appelais l'API Firebase et que je affichais des données sur mon application. Je l'ai corrigé simplement en convertissant la date/heure Firebase en JavasScript en utilisant la fonction toDate () comme ci-dessous 

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

Merci

1
Rahul