Reputation: 361
I'm pretty new in Angular. I'm trying to use a get function to return the data in my cloud firestore database in firebase. The response I'm getting is undefined, even though as you can see from the image below, there is definitely data in there. I think maybe the problem is my subscribe function in the component. I've tried many different way, but it's not working.
this is my code: in service
constructor(private afs: AngularFirestore, private aff: AngularFireFunctions) {}
getConfigurations() {
return this.afs.collection<Configuration>('configurations').valueChanges() }
in my ts file
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection} from "@angular/fire/firestore";
import {AngularFireFunctions} from "@angular/fire/functions";
import {Configuration} from "../../dashboard/dashboard.service";
import {DashboardService} from "../../dashboard/dashboard.service";
@Component({
templateUrl: './vaccine-codes.component.html',
styleUrls: ['./vaccine-codes.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class VaccineCodesComponent implements OnInit {
configurations$: Configuration[];
constructor(private dashboardService: DashboardService) {
}
// configurations$ = this.dashboardService.getConfigurations()
getConfigurations() {
this.dashboardService
.getConfigurations()
.subscribe(res => (this.configurations$ = res)
);
console.log(this.configurations$);
}
ngOnInit(): void {
this.getConfigurations();
}
}
these are my classes/interfaces:
export interface Configuration {
ChpPrefix: string;
Vaccines: { [key: string]: Vaccine[] };
description: string;
}
export interface Vaccine {
Codes: string[] | null;
}
Upvotes: 0
Views: 117
Reputation: 4184
Your getConfigurations
asynchronously get data. When you call console.log(this.configurations$)
just after the function, the data still not received.
You have to check response inside subscribe
.
configurations$: Configuration[];
getConfigurations = () =>
this.dashboardService
.getConfigurations()
.subscribe(res => {
this.configurations$ = res;
console.log(this.configurations$);
});
Upvotes: 1