要获取Firestore中的子集合并在HTML中合并,您可以使用AngularFire的Firestore模块。下面是一个示例代码,演示如何获取子集合并在HTML中合并。
首先,安装AngularFire和Firebase:
npm install firebase @angular/fire
然后,在您的Angular应用程序中,导入必要的模块和服务:
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
接下来,创建一个Angular组件,并在其中获取子集合数据:
app.component.ts:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
Subcollections:
-
{{ subcollection.name }}
`
})
export class AppComponent {
subcollections$: Observable;
constructor(private firestore: AngularFirestore) {
this.subcollections$ = this.firestore.collection('parentCollection')
.doc('parentDocument')
.collection('subcollection')
.valueChanges();
}
}
请注意,此示例假设您已经设置了Firebase配置,并且具有名为'parentCollection'和'parentDocument'的集合和文档。您可以根据自己的需求进行更改。
最后,在您的HTML模板中,使用*ngFor指令遍历获取的子集合数据,并显示在列表中。
这样,您就可以获取子集合并在HTML中合并显示了。