Currently, I am facing an issue while working on my Angular application that utilizes Firebase Firestore database and involves the use of RxJS. Let me elaborate on the problem I encountered.
Within a service class, I have implemented the following method:
getPatientAesteticEvaluationData(patientUID): Observable<AestheticEvaluation> {
return this.firestore.collection('aesthetic-evaluation')
.doc(patientUID)
.valueChanges()
.pipe(
map(aestheticEvaluation => !!aestheticEvaluation ? aestheticEvaluation : {}),
tap(console.log)
)
}
This method aims to fetch data from a Firestore collection, if it exists, and return it as an Observable.
In the component code, I have the following implementation:
ngOnInit(): void {
console.log("AestheticEvaluationComponent INIT");
//this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
.pipe(
tap(aestheticEvaluationData => !!aestheticEvaluationData ? this.fillAestheticEvaluationForm(aestheticEvaluationData) : null),
tap(console.log)
);
//this.patientAestheticEvaluationData$.subscribe();
}
I aim to invoke the service method to receive the returned Observable object. Next, I attempt to access the content of this object to call the fillAestheticEvaluationForm(aestheticEvaluationData) function with this data.
As of now, the only content within my fillAestheticEvaluationForm() method is:
fillAestheticEvaluationForm(aestheticEvaluationData) {
console.log("fillAestheticEvaluationForm START !!! aestheticEvaluationData: ", aestheticEvaluationData);
}
The issue lies in the fact that this method is never invoked. I believe that I need to subscribe to the returned observable, but when I attempt to do so like this:
this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
.pipe(
tap(aestheticEvaluationData => !!aestheticEvaluationData ? this.fillAestheticEvaluationForm(aestheticEvaluationData) : null),
tap(console.log)
).subscribe();
An error occurs with this.patientAestheticEvaluationData$:
ERROR in src/app/features/patient/patient-details/aesthetic-evaluation/aesthetic-evaluation.component.ts:24:5 - error TS2740: Type 'Subscription' is missing the following properties from type 'Observable<AestheticEvaluation>': _isScalar, source, operator, lift, and 6 more.
24 this.patientAestheticEvaluationData$ = this.patientService.getPatientAesteticEvaluationData(this.patientUID)
What could be the issue here? What am I overlooking? And how can I rectify this code?