从Cloud Firestore加载MatDatepicker中的时间戳火力地堡

Question

不加载从Cloud Firestore返回的日期。

在我将依赖关系更新从package.json更新到最新版本后，我的更改对我的应用程序在 Angular 6 中产生了很大的影响。

我无法将Timestamp类型的值加载到 Cloud Firestore 返回的DatePicker类型的字段中。

在升级之前，我返回了Date ()类型的对象，并在更新后返回 Cloud Firestore Timestamp。

我认为Firebase在此次更新中返回的类型有所变化。

Datepicker字段必须接收Date ()个对象，而不是Timestamp。

我必须遍历从Cloud Firestore返回的所有记录，并调用toDate ()方法获取Date ()对象并将其加载到DatePicker中。

有没有办法将Datepicker的输入更改为Timestamp？ 否则，我无法从 Cloud Firestore 中收到Timestamp类型的值。

的package.json：

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --hmr -e=hmr -sm=false",
    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.2",
    "@angular/animations": "6.0.0",
    "@angular/cdk": "6.0.1",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/flex-layout": "6.0.0-beta.15",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "6.0.1",
    "@angular/material-moment-adapter": "6.0.1",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/router": "6.0.0",
    "@ngrx/effects": "6.0.0-beta.1",
    "@ngrx/router-store": "6.0.0-beta.1",
    "@ngrx/store": "6.0.0-beta.1",
    "@ngrx/store-devtools": "6.0.0-beta.1",
    "@ngx-translate/core": "10.0.1",
    "@swimlane/ngx-charts": "8.0.0",
    "@swimlane/ngx-datatable": "12.0.0",
    "@swimlane/ngx-dnd": "4.0.0",
    "@types/express": "4.11.1",
    "@types/prismjs": "1.9.0",
    "angular-calendar": "0.24.0",
    "angular-in-memory-web-api": "0.6.0",
    "angularfire2": "5.0.0-rc.9",
    "body-parser": "1.18.3",
    "body-parser-zlib": "1.0.2",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.6",
    "creditcard.js": "2.1.3",
    "d3": "5.2.0",
    "express": "4.16.3",
    "firebase": "5.0.3",
    "firebase-admin": "5.12.1",
    "font-awesome": "4.7.0",
    "hammerjs": "2.0.8",
    "lodash": "4.17.10",
    "moment": "2.22.1",
    "ng2-charts": "1.6.0",
    "ng2-currency-mask": "5.3.1",
    "ngrx-store-freeze": "0.2.2",
    "ngx-color-picker": "6.0.0",
    "ngx-cookie-service": "1.0.10",
    "ngx-mask": "2.7.3",
    "ngx-toastr": "8.6.0",
    "perfect-scrollbar": "1.3.0",
    "prismjs": "1.14.0",
    "rxjs": "6.1.0",
    "rxjs-compat": "6.1.0",
    "typescript": "2.7.2",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26"
  },
  "main": "server.js",
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.0",
    "@angular/cli": "6.0.3",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "6.0.0",
    "@angularclass/hmr": "2.1.3",
    "@types/cookie-parser": "1.4.1",
    "@types/jasmine": "2.8.7",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash": "4.14.108",
    "@types/node": "8.9.5",
    "codelyzer": "4.2.1",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.4.2",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.3.1",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "webpack-bundle-analyzer": "2.11.1"
  }
}

Answer 1

我相信你的代码是这样的，所以只需将时间戳转换为Date

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Datepicker selected value */
@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  date = new FormControl(new Date(unix_timestamp*1000)); // convert timestamp to date
  serializedDate = new FormControl((new Date()).toISOString());
}

HTML：

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

Answer 2

Luiz，我在升级旧版应用程序时遇到了您的问题。

对我来说，一次只处理一个日期，因此我在时间戳上使用了toDate()方法来允许日期选择器使用它。尝试看看是否有一种方法可以整体做到这一点（我相信您已经解决了这个问题很久了，但是想发布以防万一其他人觉得有帮助）。

在将更新保存到数据库中时，我可以使用firestore.Timestamp.fromDate(myDateValue)将它们另存为时间戳。

https://medium.com/@Idan_Co/using-firebase-timestamp-with-angular-bootstraps-datepicker-317336be9923可能有助于获得进一步的了解，因为它有助于帮助我。

Answer 3

我是Angular 9的新手，并且遇到了与您相同的问题。我知道，有很多方法可以解决此问题，但是我不想花太多时间寻找一种奇特的方法。我决定选择最简单的一种，同时我的' dateProp '类型不是那么重要，因此我从' Date '更改为'任何 '

export interface ExampleModel {
  id: string;
  ...
  dateProp: any;
  ...
}

一旦我从Firebase的文档中获取了数据，我将没有任何时间访问Timestamp属性，例如“ 秒”或“ 纳秒”：

t {seconds: 1591945200, nanoseconds: 0} 

下一步，我将能够基于从Firebase文档收到的时间戳创建Date对象。

...    
public date;
public exampleModel: ExampleModel;

constructor(private exampleService: ExampleService) { }
ngOnInit() {
    ...
    if (this.exampleId != null){
      this.exampleService
        .getExampleById(this.exampleId)
        .subscribe((example: ExampleModel) => {
          this.exampleModel = example;
          if (this.exampleModel !== undefined){
            this.date = new FormControl(new Date(this.exampleModel?.dateProp.seconds * 1000));
          }
      });
    }

最后一步很简单，我只是将'date'分配给[formControl]

 <mat-form-field>
    <input name="exampleDate" matInput [matDatepicker]="exampleDatePicker" [formControl]="date" />
    <mat-datepicker-toggle matSuffix [for]="exampleDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #exampleDatePicker></mat-datepicker>
  </mat-form-field>

这是两年前的问题，但是我仍然写这个解决方案，因为我希望我的解决方案可以帮助下一个将遇到与我一样棘手的问题的人。 ：D