在Angular和Firebase Firestore中,当您订阅一个文档时,它将立即返回一个初始值,然后在该文档发生更改时再次返回更新后的值。如果您想要在初始订阅时获取两个值,可以使用BehaviorSubject来实现。
首先,创建一个带有BehaviorSubject的服务,用于保存文档的当前值。在文档发生更改时,更新该BehaviorSubject。以下是一个示例服务代码:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable()
export class DocumentService {
private documentSubject = new BehaviorSubject(null);
document$ = this.documentSubject.asObservable();
constructor(private firestore: AngularFirestore) { }
subscribeToDocument(docId: string) {
this.firestore.doc(`yourCollection/${docId}`).valueChanges().subscribe(doc => {
this.documentSubject.next(doc);
});
}
}
在上述代码中,documentSubject是一个BehaviorSubject,document$是一个可观察对象,用于订阅文档的更改。subscribeToDocument()方法用于订阅文档,并在文档更改时更新documentSubject。
接下来,在组件中使用该服务来订阅文档并获取两个值。以下是一个示例组件代码:
import { Component, OnInit } from '@angular/core';
import { DocumentService } from './document.service';
@Component({
selector: 'app-document',
template: `
{{ document.name }}
{{ document.description }}
`,
providers: [DocumentService]
})
export class DocumentComponent implements OnInit {
document$;
constructor(private documentService: DocumentService) { }
ngOnInit() {
this.documentService.subscribeToDocument('yourDocumentId');
this.document$ = this.documentService.document$;
}
}
在上述代码中,DocumentComponent通过DocumentService订阅了文档,并在ngOnInit生命周期钩子中将document$设置为DocumentService中的document$。
在组件的模板中,使用async管道来订阅document$可观察对象,并在文档值存在时显示文档的名称和描述。
请注意,上述代码中的yourCollection和yourDocumentId应替换为您的Firestore集合和文档的实际名称。
上一篇:Angular + firebase - 无法在HTML中获取键值。
下一篇:Angular + Firebase: 将 Observable<Object[]> 分配给 MatTableDataSource<Object>