在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>