在Angular中使用Firestore进行查询时,无法直接获得文档的ID。但是,可以通过订阅查询的结果并使用RxJS的map操作符来映射文档ID。
以下是解决方法的代码示例:
FirestoreService
),并导入Firestore和Angular的RxJS库:import { Injectable } from '@angular/core';
import { AngularFirestore, QuerySnapshot } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class FirestoreService {
constructor(private firestore: AngularFirestore) { }
getDocuments() {
return this.firestore.collection('yourCollection').snapshotChanges()
.pipe(
map((snapshots: QuerySnapshot) => {
return snapshots.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data };
});
})
);
}
}
FirestoreService
来获取文档列表:import { Component } from '@angular/core';
import { FirestoreService } from './firestore.service';
@Component({
selector: 'app-root',
template: `
-
{{ doc.id }} - {{ doc.name }}
`,
})
export class AppComponent {
documents$ = this.firestoreService.getDocuments();
constructor(private firestoreService: FirestoreService) {}
}
在上面的代码中,getDocuments()
方法返回一个可观察对象(Observable),它订阅Firestore文档快照的变化。在map
操作符中,我们通过将文档ID与文档数据合并到一个新对象中来映射快照。
在组件中,我们使用async
管道来订阅documents$
可观察对象,并在模板中循环显示文档的ID和名称。
请注意,上述代码假设你已经正确配置了AngularFirestore模块,并且已经安装了相关的依赖项。