使用 Angular 在 Firebase 中的云 Firestore 上使用 get 函数时得到未定义的结果

Question

我是 Angular 的新手。我正在尝试使用 get 函数 return 我在 firebase 中的云 firestore 数据库中的数据。我得到的响应是未定义的，尽管如下图所示，其中肯定有数据。我认为问题可能出在我在组件中的订阅功能上。我尝试了很多不同的方法，但都没有用。

这是我的代码： 在役

 constructor(private afs: AngularFirestore, private aff: AngularFireFunctions) {}

 getConfigurations() {
    return this.afs.collection<Configuration>('configurations').valueChanges()  }

在我的 ts 文件中

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();
  
  }


}

这些是我的 classes/interfaces:

export interface Configuration {
  ChpPrefix: string;
  Vaccines: { [key: string]: Vaccine[] };
  description: string;

}

export interface Vaccine {
  Codes: string[] | null;
}

这是我的数据库：

Answer 1

您的 getConfigurations 异步获取数据。当您在函数之后调用 console.log(this.configurations$) 时，仍然没有收到数据。

您必须检查 subscribe 内的响应。

  configurations$: Configuration[]; 
  getConfigurations = () =>
    this.dashboardService
      .getConfigurations()
    .subscribe(res => {
      this.configurations$ = res;
      console.log(this.configurations$);
    });