Angular 9 - 使用 Firebase 和 Cloud Firestore 的后端

Question

前端 (Angular) 有一个服务器，后端在 Firebase 中，我正在使用 Cloud Firestore。

我尝试了实时数据库，一切正常，但我想尝试 Cloud Firestore 及其 collections。

问题如下：

这是组件：

 items: Array<any>;

  constructor(private aboutUsService: AboutUsService) { }

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.aboutUsService.getContent()
    .subscribe(data => {
      this.items = data;
      console.log('items: ',  this.items);
    }, // Bind to view
    err => {
      console.log(err);
    });
  }

这是服务：

  getContent() {
    return this.db.collection('aboutus').snapshotChanges();
  }

目前我在 Cloud Firestore 中有一个 collection：

云 Firestore 规则：

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

服务响应并 returns 包含一个元素的以下数组（这是 this.items 的内容）：

[{…}]
0:
payload: {type: "added", doc: n, oldIndex: -1, newIndex: 0}
type: "added"

这些是 Chrome 网络选项卡中的 headers：

Request URL: http://localhost:4200/aboutus
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:4200

但我无法找到 collection 的数据以将其显示在 front-end（变量 this.items）中。

如果我在响应数组中向 collection "aboutus" 添加元素，它对应于 collection 的元素，但我无法可视化数据.

可能是什么问题？谢谢

Answer 1

正如我在两周前（5 月 15 日）的评论中提到的：

You should be using AngularFirestoreCollection.valueChanges, which returns an Observable of the value of the collection while AngularFirestoreCollection.snapshotChanges shows additional metadata on snapshots. For more info, consider viewing the documentation: https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md

因此，您应该将 snapshotChanges 调用替换为 valueChanges:

getContent() {
  return this.db.collection('aboutus').valueChanges();
}

Angular 9 - 使用 Firebase 和 Cloud Firestore 的后端

Angular 9 - Backend with Firebase and Cloud Firestore

firebase

angularfire2

angular

google-cloud-firestore