firestore无法获取文档id QuerySnapshot.docChanges已更改
firestore无法获取文档id QuerySnapshot.docChanges已更改
提问于 2018-07-10 20:37:11
我在试着拿到医生的身份证。除了抛出错误的snapshotChanges()方法之外，我找不到任何其他方法来获取此数据。我在代码中看不到任何错误，在论坛上也找不到任何类似的问题。当我使用valueChanges()时，获取数据没有问题。
控制台中出现错误
基础结构
service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { IGallery } from '../interfaces/igallery';
import { timestamp } from 'rxjs/operator/timestamp';
@Injectable()
export class GalleriesService {
GalleriesCol: AngularFirestoreCollection<IGallery>;
galleriesObservable: Observable<any[]>;
// some code
constructor(private db: AngularFirestore) {
db.firestore.settings({ timestampsInSnapshots: true });
this.galleriesObservable = this.db.collection('galleries').snapshotChanges().map(changes => {
return changes.map(a => {
const data = a.payload.doc.data() as IGallery;
data.galleryId = a.payload.doc.id;
console.log(data);
return data;
});
});
}
getGalleries() {
return this.galleriesObservable;
}
// some code
}app.component.ts
getGalleries() {
this.galleriesService.getGalleries()
.subscribe(
data => {
this.galleries = data;
this.galleriesStatic = this.galleries;
this.setNumberOfPages();
this.setYearList();
this.setCurrentPage();
this.setTags();
console.log(this.galleries);
}
);
this.currentPage = parseInt(localStorage.getItem('galleryPage'), 10) || 0;
this.setCurrentPage(this.currentPage);
}
ngOnInit() {
this.getGalleries();
}package.json
{
"name": "angular-uczelnia",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/cdk": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.11",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@firebase/app": "^0.1.6",
"@types/jquery": "^3.3.4",
"angular2-lightbox": "^1.3.0",
"angular5-toaster": "^1.0.2",
"angularfire2": "5.0.0-rc.7",
"core-js": "^2.4.1",
"firebase": "^5.2.0",
"hammerjs": "^2.0.8",
"jquery": "^3.3.1",
"lightbox2": "^2.10.0",
"ng-tags-input": "^3.2.0",
"ng2-order-pipe": "^0.1.5",
"ng2-toastr": "^4.1.2",
"ng2-truncate": "^1.3.11",
"ng4-tag-input": "^1.0.5",
"ngx-chips": "^1.9.2",
"ngx-order-pipe": "^2.0.1",
"npm-check-updates": "^2.14.2",
"rxjs": "^5.5.6",
"uuid": "^3.2.1",
"webpack": "^3.1.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}更新
我试图通过将"angularfire2@5.0.0-rc.7“更新为"5.0.0-rc.11”来解决这个问题。
更新后：
npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform- browser@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform- browser-dynamic@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.11 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.浏览器控制台：
ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
TypeError: app.firestore is not a function所以我就这么做了：
npm install rxjs@6 rxjs-compat@6 --save但后来我得到了这个：
npm WARN @angular/core@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/router@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.如果在我的package.json中得到"^5.2.0“，我不知道为什么警告会涉及到"4.4.7”版本。然后我删除了\node_modules\@angular和package-lock.json
npm install依赖项警告以及浏览器控制台中的错误仍会出现：
ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
TypeError: app.firestore is not a function这也没有帮助：
npm uninstall -g @angular/cli@1.7.3
npm cache clear
npm install -g @angular/cli@1.7.3我在两个版本上都有问题，现在我不确定我应该尝试修复哪个版本的问题……
回答 2
Stack Overflow用户
发布于 2018-07-18 06:26:56
你能试着这样做吗：
this.galleriesObservable = this.db.collection('galleries').
snapshotChanges().pipe(
map(changes => changes.map(a => {
const data = a.payload.doc.data() as IGallery;
const galleryId = a.payload.doc.id;
console.log(data);
return data;
})
)
);注意pipe()的用法。
如果它起作用了，请告诉我。
Stack Overflow用户
发布于 2018-10-08 10:49:37
您需要立即订阅才能在服务中记录结果：
this.galleriesObservable = this.db
.collection('galleries')
.snapshotChanges()
.pipe(map(changes => changes
.map(a => {
const data = a.payload.doc.data() as IGallery;
const galleryId = a.payload.doc.id;
// Create new Gallery data Object
let transformedData = { galleryId, ...data };
// log data object
console.log(transformedData);
// Return data object
return transformedData;
})
)
).subscribe();但是，最好在组件中这样做，这样您就可以利用onDestroy生命周期钩子来取消订阅。
如果您正在使用模板中的值，请使用async管道，Angular将处理订阅的销毁。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51265426
复制相关文章
相似问题