web-dev-qa-db-ja.com

DatePipeがAngular 6で正しく機能していません

バージョン5から6にアップグレードした後のAngularアプリケーションでは、DatePipeを使用するとこのエラーが発生します。

mat-date-picker がdate_fieldの名前で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: {…}}
angularfirebasedatepipegoogle-cloud-firestore
18
Luiz Ricardo Cardoso

FirebaseからDate形式のフィールドを取得した場合、パイプの前にtoDate（）で変換する必要があります。例：

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

間違ったタイプの引数を渡しています。日付フィルターは、日付オブジェクト、数値（エポックからのミリ秒数）、および文字列（ documentation を参照）を受け入れます。

Timestampタイプが何であるかはわかりませんが、secondsプロパティがあるようです。

そのオブジェクトからエポック以降のミリ秒数を取得してみてください

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

または、それを取得するための組み込みメソッドがあるかもしれません

EditFirebaseを使用しているため、組み込みのtoDateメソッドを呼び出して、FirebaseオブジェクトをプレーンなJS Dateオブジェクトに変換できるようです

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

toDate()を使用して、パイプの前にFirebase TimestampをJavascript Dateオブジェクトに変換します。

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

3
Denes Papp

Firebase APIを呼び出してアプリにデータを表示しているときに、同じ問題に直面していました。以下のようにtoDate（）関数を使用してFirebase datetimeをJavasScriptに変換するだけで修正しました-

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

ありがとう

2
Rahul