firestore 无法获取文档 ID QuerySnapshot.docChanges 已更改

Question

我正在尝试获取文档 ID。我找不到任何其他方法来获取这些数据，除了 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

两个版本都有问题，现在我不确定应该尝试修复哪个版本的问题...

Answer 1

你可以试试这样吗：

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()的用法。

让我知道它是否有效。

Answer 2

您需要立即订阅以从服务中记录结果：

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 将处理订阅的销毁。