javascript - 从 Cloud Firestore 在 MatDatepicker 中加载时间戳 | 火力基地
问题描述
不加载从 Cloud Firestore 返回的日期。
在我将依赖项从最新版本更新到最新版本后,我在Angular 6package.json
中对我的应用程序产生了很大影响。
我无法将 Timestamp 类型的值加载到Cloud Firestore返回的DatePicker类型的字段中。
在我升级之前,我返回了一个类型的对象,Date ()
并且在更新之后返回了一个Cloud Firestore Timestamp
。
我相信 Firebase 在此更新中返回的类型发生了一些变化。
Datepicker 字段必须接收一个Date ()
对象,而不是一个Timestamp
.
我必须遍历从 Cloud Firestore 返回的所有记录并调用该toDate ()
方法来获取Date ()
对象并将其加载到 DatePicker 中。
有没有办法将 Datepicker 的类型更改为 Timestamp?否则我无法从Cloud Firestore接收 Timestamp 类型的值。
包.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()
Timestamp 上的方法来允许 datepicker 使用它。尝试看看是否有一种方法可以集体执行此操作(我相信您早就解决了这个问题,但希望发布以防其他人发现这有帮助)。
在将更新保存到数据库时,我可以使用firestore.Timestamp.fromDate(myDateValue)
.
https://medium.com/@Idan_Co/using-firebase-timestamp-with-angular-bootstraps-datepicker-317336be9923可能有助于进一步了解,因为它有助于帮助我。
推荐阅读
- c++ - 具有模板构造函数特化的模板类,用于初始化模板化基类
- java - 使用 GroupLayout 时出现 InvalidateStateException
- angular - 如何在 ng for 循环中动态创建引导行和列
- r - sapply 返回向量的第一个元素的重复实例,而不是由 R 中的自定义函数计算的所有元素
- node.js - 如何过滤来自 mongoDb 的元数据(对象)中的数据?
- r - 当 NA 时,有条件地对 dygraph 时间序列的区域进行着色
- c - 为什么我需要为字符串分配内存而不是总是只使用指针?
- python - 正则表达式拆分字符串,不包括可转义引号之间的分隔符
- angular - 使用 angular-svg-icon 组件从库的资产中引用 svg 图标
- swift - React Native 应用程序向 SwiftUI 小部件发送数据