使用 AngularFireStore 将文档/集合作为对象返回

Question

我正在编辑问题以使其更清楚：

使用此代码将返回一个 Promise，在某些情况下非常有用。服务.ts：

async getElement(id: string): Promise<AngularFirestoreDocument<Element>> {
   return this.firestore.doc<Element>(`/element/${id}`);
}

我正在寻找一种将其作为对象返回的方法，以便它不再与 firebase 链接。

这是我的page.ts

async ngOnInit() {
   this.elementId = this.route.snapshot.paramMap.get('id');
   this.elementService.getElement(this.elementId).then(element$ => {
      this.element= element$.valueChanges();
   });
}

关于如何做的任何想法？

我希望能够进行（离线）操作，例如

this.element.name = 'New name';

和

{{element.name}}

我对收藏也有同样的问题。

Answer 1

如果我理解正确，您想要获取文档，断开与 firebase 的连接并将其用作简单的 javascript 对象。在这种情况下，您的文档获取流程应如下所示：

this.firestore.doc('path/to/doc').get().toPromise().then(res => {
  this.doc = res.data();
});

对于集合，实现非常相似

this.firestore.collection('/path/to/collection').get().toPromise().then(res => {
  this.collection = res.docs.map(d => d.data());
});

在这种情况下，您将获得一个简单的 JavaScript 对象，如 this.doc 和 this.collection 中的数组，您可以随意使用它们。但是，您的任何更改都不会直接影响云中的 Firebase 实体。您需要为此创建单独的方法。

如果我理解正确并且我的回答对您有帮助或者您还有一些问题，请告诉我。

Answer 2

valueChanges 返回且可观察，因此您需要使用 async 管道渲染它

{{ (element | async)?.name }}

如果要在本地更新，需要订阅

this.firestore.doc(`/element/${id}`).valueChanges()
.pipe(
  take(1)
)
.subscribe(doc => {
  this.element = doc;
});

Answer 3

您似乎在使用AngularFire

开启document.service.ts

constructor(private firestore: AngularFirestore) { }

addDocument(document: DocumentInterface): Observable<any> {
  this.documentCollection = this.firestore.collection(`documents/`);
  return from(this.documentCollection.add(document));
}

要使用它，只需注入 documentService 服务。

constructor(private documentService: DocumentService) {
}

createDocument(document: DocumentInterface) {
  this.documentService.addDocument(document).subscribe(() => console.log('Success'), () => console.log('error'))
}

More info on docs