在Angular中使用AngularFire从同一集合中获取相关数据的解决方法是使用Firestore查询。下面是一个示例代码,演示了如何使用AngularFire从同一集合中获取相关数据:
首先,确保已经安装了AngularFire和Firebase:
npm install firebase @angular/fire
接下来,在你的Angular模块中导入AngularFireModule和AngularFirestoreModule,并在imports数组中添加它们:
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule
],
// ...
})
export class AppModule { }
然后,在你的组件中注入AngularFirestore服务,并使用它来查询相关数据:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-my-component',
template: `
- {{ item.name }}
`,
})
export class MyComponent {
items$: Observable;
constructor(private firestore: AngularFirestore) {
// 查询集合中的所有文档
this.items$ = this.firestore.collection('items').valueChanges();
// 根据条件查询相关数据
// this.items$ = this.firestore.collection('items', ref => ref.where('category', '==', 'books')).valueChanges();
}
}
在上面的示例中,我们通过调用this.firestore.collection('items').valueChanges()
来获取集合中的所有文档。你可以使用where
方法来添加条件查询,例如ref.where('category', '==', 'books')
将只返回category
字段等于books
的文档。
最后,在模板中使用async
管道来订阅Observable并显示数据。
请记住,你需要在Firebase控制台中正确配置你的数据库规则,以确保你的应用程序有权访问集合中的数据。