DatePipe не работает правильно в Angular 6
В моем приложении Angular после обновления с версии 5 до 6 эта ошибка возникает при использовании DatePipe.
Я сохраняю объект Date (), который подборщик свиданий создает в Cloud Firestore, с именем date_field, когда возвращается, пытается показать на экране пользователю, но не появляется.
Я проверил базу данных, и она правильно сохраняется, но я не могу отобразить ее на экране для пользователя в поле child_name.
Когда вы пытаетесь отобразить столбец 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: {…}}
Ответы 5
Вы передаете аргумент неправильного типа. Фильтр Date принимает объекты Date, числа (количество миллисекунд с начала эпохи) и строку (см. документация).
Я не уверен, что это за тип Timestamp, но похоже, что у него есть свойство seconds.
Попытайтесь получить количество миллисекунд с эпохи от этого объекта
{{(paciente.data_nascimento.seconds * 1000) | date}}
Или может быть встроенный метод для его получения
Редактировать Очевидно, поскольку вы используете Firebase, вы можете вызвать встроенный метод toDate для преобразования объекта Firebase в простой объект JS Date
{{paciente.data_nascimento.toDate() | date}}
Если у вас есть поле с форматом Date из firebase, вам нужно преобразовать его с помощью toDate () перед вашим каналом, например:
{{paciente.data_nascimento.toDate() | date: 'dd/MM/yyyy'}}
эта функция toDate () преобразует формат метки времени в допустимую дату, например метка времени (секунды = 1531605600, наносекунды = 0) будет изменена на Sun 15 июля 2018 00:00:00 GMT + 0200 (CEST)
У меня была та же проблема, и функция toDate () сработала для меня с приложением Angular 6, использующим серверную часть firestore!
может кто-нибудь помочь ответить на этот stackoverflow.com/questions/65414341/…?
Используйте toDate() для преобразования метки времени Firebase в объект даты Javascript перед вашим каналом:
{{ paciente.data_nascimento.toDate() | date }}
Я столкнулся с той же проблемой, когда вызывал Firebase API и отображал данные в своем приложении. Я исправил это, просто преобразовав дату и время Firebase в JavasScript с помощью функции toDate (), как показано ниже -
<mat-cell *matCellDef = "let element">{{element.date.toDate() | date}}</mat-cell>
Спасибо
Angular 6 на подопечных вы должны использовать функцию toDate(). Кроме того, на официальном сайте Угловой доступно множество каналов с датами. Вы можете проверить доступные трубы и документы на этом ссылка на сайт. для примера я использую канал fullDate. Смотрите мой код ниже
<h3>Posted By {{blog.author}} • {{blog.published.toDate() | date:'fullDate'}}</h3>.
Я надеюсь ты получишь ответ
Но мое поле DatePicker не отображало дату, потому что возвращается метка времени, мне нужно вернуть Date ()