下面是对正在发生的事情的简要解释:
- 我为新版本的 Angular 更新了我的应用程序,从 5 更新到 6。
- 我使用
ng update
命令更新了所有packages.json
部署。
我在 Cloud Firestore 数据库中保存一个 Date()
值,字段 birthday_date (timestamp) 使用我页面上的输入与 DatePicker Angular Material 的组成部分.
在进行依赖更新之前,
Date ()
类型的值是 在 birthday_date(时间戳) 从数据库返回 字段,所以我可以使用{{ data.birthday_date |日期}}
。更新
package.json
中的依赖项后,您是 在 birthday_date 中返回类型为Timestamp
的值 (时间戳) 字段。现在我需要调用
toDate()
方法来获取Date()
对象。{{ data.birthday_date.toDate() |日期}}
The return before was a
Date ()
object:
Sat May 19 2018 20:35:12 GMT-0300
After updating the return is a
Timestamp
object:
Timestamp {seconds: 1527476400, nanoseconds: 0}
在 package.json
中更新了依赖项:
"firebase": "4.11.0", ->
"firebase": "5.0.3"
"angularfire2": "5.0.0-rc.6", ->
"angularfire2": "5.0.0-rc.9",
以下是我的部分应用代码:
我的组件.component.html:
<form name="myForm" [formGroup]="myForm" class="w-100-p">
<mat-form-field fxFlex="30">
<input matInput [matDatepicker]="picker" formControlName="birthday_date " placeholder="Date of birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="multi-year" disabled="false" touchUi="true"></mat-datepicker>
</mat-form-field>
</form>
不在输入中显示日期,因为您返回的是 Timestamp
和 DatePicker组件需要一个 Date ()
值。
list.component.ts:
<ng-container cdkColumnDef="birthday_date">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Date of birth</mat-header-cell>
<mat-cell *cdkCellDef="let data" fxHide fxShow.gt-xs>
<p class="text-truncate">{{ data.birthday_date | date }}</p>
</mat-cell>
</ng-container>
如果我不调用toDate()
方法{{ data.birthday_date.toDate() | date }}
发生以下错误:
ListComponent.html:81 ERROR Error: InvalidPipeArgument: 'Unable to convert "Timestamp(seconds=1526698800, 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] (ListComponent.html:81)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11948)
at checkAndUpdateView (core.js:11320)
我正在寻找的解决方案:
我需要以某种方式进行更改以返回类型为 Date()
的对象,而不是 Timestamp
,因为这影响了我的应用程序中的许多地方并延迟了我的整个项目。
最佳答案
我遇到了同样的问题。我是这样解决的:
data.birthday_date.seconds * 1000 | date
关于angular - 发生错误 InvalidPipeArgument Angular 6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50430499/