DatePipe не работает правильно в Angular 6 - PullRequest
Новая
       7

DatePipe не работает правильно в Angular 6

0 голосов
/ 19 мая 2018

В моем приложении Angular после обновления с версии 5 до 6 эта ошибка возникает при использовании DatePipe.

Я сохраняю объект Date (), который mat-date-picker создает в Cloud Firestore с именем поля date_, при возврате пытается показать пользователю на экране, но не появляется.

Я проверил базу данных, и она сохраняется правильно, но я не могу отобразить еена экране для пользователя в поле child_name.

При попытке отобразить столбец date_field в mat-table и использовать 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 ]

0 голосов
/ 02 сентября 2018

Я столкнулся с той же проблемой, когда вызывал API Firebase и отображал данные в своем приложении.Я исправил это, просто преобразовав дату и время Firebase в JavasScript, используя функцию toDate (), как показано ниже - 

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

Спасибо

0 голосов
/ 20 мая 2018

Если вы получили поле с форматом Date из firebase, вы должны преобразовать его с помощью toDate () перед вашим каналом, например: 

{{paciente.data_nascimento.toDate() | date: 'dd/MM/yyyy'}}
0 голосов
/ 22 июня 2018

Используйте toDate(), чтобы преобразовать метку времени Firebase в объект даты Javascript перед каналом:

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

0 голосов
/ 19 мая 2018

Вы передаете неверный тип аргумента.Фильтр Date принимает объекты Date, числа (количество миллисекунд с начала эпохи) и строки (см. документация ).

Я не уверен, что такое тип Timestamp, но похоже, что онимеет свойство секунд.

Попробуйте получить количество миллисекунд с начала эпохи от этого объекта 

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

Или может быть встроенный метод для его получения

Редактировать По-видимому, поскольку вы используете Firebase, вы можете вызвать встроенный метод toDate для преобразования объекта Firebase в простой объект JS Date 

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