可以使用AngularFire的valueChanges方法和rxjs的map操作符来将Firestore文档映射到一个数组上。下面是一个示例代码:
首先,确保已经安装了AngularFire和rxjs:
npm install firebase @angular/fire rxjs --save
然后,在你的Angular组件中导入必要的依赖:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
接下来,注入AngularFirestore服务,并使用valueChanges方法获取Firestore文档的数据:
export class YourComponent {
documentsArray: any[];
constructor(private firestore: AngularFirestore) {}
ngOnInit() {
this.firestore.collection('your-collection').valueChanges().pipe(
map(documents => {
this.documentsArray = documents.map(document => {
return {
id: document.payload.doc.id,
...document.payload.doc.data()
};
});
})
).subscribe();
}
}
在上面的代码中,我们使用map操作符将获取到的文档数据映射到一个新的数组上。在map操作符中,我们使用了payload属性来获取文档的id和数据,并将它们合并到一个新的对象中。最后,将新的数组赋值给documentsArray属性。
现在,documentsArray属性将包含Firestore文档的数据。你可以在组件的模板中使用它来展示数据。
希望对你有所帮助!