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;
}
this is my database:
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…