javascript - 从 Cloud Firestore 在 MatDatepicker 中加载时间戳 |火力地堡

Question

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

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

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

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

我相信 Firebase 在此更新中返回的类型发生了一些变化。

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

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

有没有办法将日期选择器的类型更改为时间戳？否则我无法从 Cloud Firestore 接收时间戳类型的值。

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

Luiz，我刚刚遇到了你的问题，因为我正在升级一个旧应用程序并遇到了同样的问题。

对我而言，我一次只处理一个日期，因此我在时间戳上使用 toDate() 方法以允许日期选择器使用它。尝试看看是否有一种方法可以集体执行此操作(我相信您早就解决了这个问题，但想发帖以防其他人发现这有帮助)。

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

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