发生错误 InvalidPipeArgument Angular 6

Posted 2023-02-24

【中文标题】发生错误 InvalidPipeArgument Angular 6

【英文标题】：Error is occurring InvalidPipeArgument Angular 6

【发布时间】：2018-10-30 00:39:13

【问题描述】：

下面是正在发生的事情的简要说明：

我为新版本的 Angular 更新了我的应用程序，从 5 更新到 6。 我使用ng update 命令更新了所有packages.json 部署。

我正在 Cloud Firestore 数据库中保存 Date() 值，字段 birthday_date (timestamp) 在我的页面上使用带有 DatePicker 组件的输入Angular Material。

在进行依赖更新之前，Date () 类型的值是 在 birthday_date（时间戳） 从数据库返回 字段，所以我可以使用 data.birthday_date | date 。

更新package.json 中的依赖项后，您将 在 birthday_date 中返回 Timestamp 类型的值 （时间戳） 字段。

现在我需要调用toDate () 方法来获取Date () 对象。

data.birthday_date.toDate() | date

之前的返回是一个Date ()对象：

Sat May 19 2018 20:35:12 GMT-0300

更新后返回的是一个Timestamp对象：

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",

以下是我的应用程序代码的一部分：

mycomponent.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，因为这已经影响了我的应用程序中的许多地方并延迟了我的整个项目。

【问题讨论】：

你能找到解决办法吗？我也有同样的问题。当我使用例如：dateCreation.toDate () | date: 'medium' 如果它返回一个日期（）值并正确显示但它会生成以下错误：TypeError: Can not read property 'toDate' of undefined

【参考方案1】：

我遇到了同样的问题。我是这样解决的：

data.birthday_date.seconds * 1000 |日期