发生错误InvalidPipeArgument Angular 6

时间:2018-05-19 23:54:26

标签: angular typescript date firebase timestamp

以下是对正在发生的事情的简要说明:

  1. 我更新了我的Angular新版本的应用程序,从5更新到6。
  2. 我使用packages.json命令更新了所有ng update部署。
  3. 我在 Cloud Firestore 数据库中保存Date()值,使用我的页面上带有{的输入 birthday_date(timestamp)字段 {3}}的{3}}组件。

    1. 在执行依赖项更新之前,类型为Date ()的值为 从 birthday_date(时间戳)中的数据库返回 字段,所以我可以使用{{ data.birthday_date | date }}
    2. package.json中的依赖项进行更新后 在 birthday_date中返回Timestamp类型的值 (时间戳)字段。
    3. 现在我需要调用toDate ()方法来获取Date ()对象。

      {{ data.birthday_date.toDate() | date }}

    4.   

      之前的回报是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,因为这会影响我的应用程序中的许多位置并延迟我的整个项目。

1 个答案:

答案 0 :(得分:0)

我有同样的问题。我是这样解决的:

  

data.birthday_date.seconds * 1000 |日期