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

标签 javascript angular typescript firebase angular-material

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

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

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

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

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

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

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

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

enter image description here

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

最佳答案

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

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

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

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

关于javascript - 从 Cloud Firestore 在 MatDatepicker 中加载时间戳 |火力地堡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50671563/

相关文章:

javascript - VS Code TypeScript SourceMaps 通过 TSC 不工作

javascript - Angular Material 分页器 nextPage 属性

javascript - 使用javascript播放声音不起作用

javascript - Bing map v8 - 缩小 map 时信息框不会出现在预期位置

javascript - 如何防止iframe影响浏览器历史记录

angular - 在 Angular 2 中,如何切换字形并触发其功能? *ng如果?

angular - 对于 keycloak + angular + cordova 应用程序,注销似乎只有在登录后 10-15 秒内完成才有效

node.js - groupBy 查询与 nodejs ravendb 客户端

node.js - NestJS - Mongoose @InjectConnection 单元测试

javascript - Flex 容器内的底部对齐 div