如何在運行函數之前等待數據從 Firestore 加載 Angular

Question

現在的情況：

我有一項服務可以從employee.service.ts讀取來自 Cloud Firestore 的數據：

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 。 問題是我需要在運行formsInit()之前完全加載來自getEmployees()的一些數據。

問題

我如何重寫這段代碼，以便formsInit等待getEmployees完成其異步操作？

編輯 1：
我現在能想到的最好的辦法是修改getEmployees()以接受一個可選參數，即 function 以便它在檢索到數據后運行。 不過，不確定那會有多實用或干凈。

Answer 1

您可以像這樣從getEmployees function 調用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
    }
}