I'd like to call a function just once whenever my Firebase document data changes, but chaining a .subscribe() onto my valueChanges() causes the subscription to fire twice every time there's an update.
Basic code without a subscription:
home.component.ts:
constructor(private firestore: AngularFirestore) { }
ngOnInit(): void {
let docName = this.buildDocName();
this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges();
}
home.component.html:
<mat-list *ngIf="(plants | async)">
<mat-list-item>Humidity: {{ (plants | async)?.humidity }}</mat-list-item>
<mat-list-item>Temperature: {{ (plants | async)?.temperature }}</mat-list-item>
</mat-list>
This code causes the subscription to fire twice:
home.component.ts:
ngOnInit(): void {
let docName = this.buildDocName();
this.plants = this.firestore.collection('officePlants').doc(docName).valueChanges()
.subscribe(data => {
if (!data)
return;
console.log('doc updated...', data);
// ...
});
}