Текущая ситуация:

У меня есть служба, которая считывает данные из облачного магазина 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() , чтобы принять необязательный аргумент, который является функцией, для запуска после получения данных. Хотя я не уверен, насколько практичным или чистым это было бы.

Вы могли бы просто позвонить formsInit() из своей getEmployees функции, например:

 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
    }
}