如何在 运行 函数 Angular 之前等待从 Firestore 加载数据

Question

现状：

我有一个从 Cloud Firestore 读取数据的服务 来自 employee.service.ts:

getEmployeeList(orgID: string) {
    return this.firestore.collection('orgData').doc(orgID).collection('employeeList').snapshotChanges();
  }

我使用此服务从 component.ts:

读取组件中的数据

export class ManageEmployeesComponent implements OnInit {
    newEmployee: FormGroup;
    Employees: Employee[];

    selectedOrganization: string;
  
    @Input() set selectOrg(org: string) {
      this.selectedOrganization = org;
      this.getEmployees();
      this.formsInit();
    }

    getEmployees() {
      this.employeeService.getEmployeeList(this.selectedOrganization).subscribe(data => {
        this.Employees = data.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as Employee
          };
        })
      });
    }

    formsInit() {
        //some reactive form stuff
    }
}

问题：

每次设置 selectOrg 输入时，它会同步 运行 和 getEmployees 和 formsInit。问题是我需要 getEmployees() 中的一些数据在 运行 formsInit().

之前完全加载

问题

如何重写此代码，以便 formsInit 等待 getEmployees 完成其异步操作？

编辑 1：
我现在能想到的最好的办法是修改 getEmployees() 以接受一个可选参数，该参数是一个函数，一旦数据被检索到 运行 。不过，不确定这有多实用或干净。

Answer 1

您可以像这样从 getEmployees 函数中调用 formsInit()：

export class ManageEmployeesComponent implements OnInit {
    newEmployee: FormGroup;
    Employees: Employee[];

    selectedOrganization: string;
  
    @Input() set selectOrg(org: string) {
      this.selectedOrganization = org;
      this.getEmployees();
    }

    getEmployees() {
      this.employeeService.getEmployeeList(this.selectedOrganization).subscribe(data => {
        this.Employees = data.map(e => {
          return {
            id: e.payload.doc.id,
            ...e.payload.doc.data() as Employee
          };
        });
        this.formsInit();
      });
    }

    formsInit() {
        //some reactive form stuff
    }
}