如何使依赖于先前函数数据的函数等到设置该数据

问题：我正在尝试使用第二个函数从 Firebase 检索信息，该函数依赖于从先前函数调用中设置的数据。但是，第二个函数在第一个函数设置数据之前执行。我知道这是因为函数在 Typescript / Angular 中的执行方式，但我不太熟悉使用异步函数。

问题：让第二个函数等到设置所需数据的最佳方法是什么？

附加信息：正在从 Firebase Firestore 存储/检索数据。我正在使用的集合包含任意数量的城市文件。这些城市文件中的每一个都包含一系列家庭。由于城市的数量可能会有所不同，我需要首先检索有家庭的城市列表，然后使用该列表检索其中的家庭。我尝试使用 Promises 来解决问题，尝试使函数异步（然后使用await），并制作回调函数，但没有运气。我在下面包含了我尝试过的解决方案。我还有更多需要包含的代码（或者如果我需要发布 Firestore 布局）请告诉我。

我也对检索/存储数据的其他解决方案持开放态度，只要它遵循与 Firestore 数据相同的格式。

代码：

home.component.ts：

export class HomeComponent implements OnInit {
  activeCities: any = [];
  activeFamilies: Map<string, Family[]>;

  constructor(private fbService: FirebaseService) { }

  ngOnInit() {
    this.getActiveCities();
    this.getAllFamilies();
  }

  getActiveCities() {
    this.fbService.getActiveCities().subscribe(
      data => {
        this.activeCities = data;
      },
      error => {
        console.log("Error retrieving active cities");
      }
    );
  }

  getAllFamilies() {
    for (let city of this.activeCities) {
      this.fbService.getFamiliesForCity(city.id).subscribe(
        data => {
          let families: Family[] = [];
          families = data;
          this.activeFamilies.set(city .id, families);
        },
        error => {
          console.log("Error retrieving families for active cities");
        }
      );
    }
  }
}

firebase.service.ts：

export class FirebaseService {
  private activeCitiesPath = '/active_cities';
  constructor(private firestore: AngularFirestore) { }

  getActiveCities() {
    let colRef: AngularFirestoreCollection<any>;
    let temp: Observable<any[]>;
    let path = this.activeCitiesPath;
    colRef = this.firestore.collection(path);
    return colRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as any;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }

  getFamiliesForCity(cityCode: string) {
    let colRef: AngularFirestoreCollection<any>;
    let temp: Observable<any[]>;
    let path = this.activeCitiesPath + "/" + cityCode + "/families";
    colRef = this.firestore.collection(path);
    return colRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as any;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }

}

尝试的解决方案：我尝试了以下解决方案，但到目前为止都没有奏效：

承诺：

async ngOnInit() {
    let promises: Promise<void>[] = [];
    promises.push(this.getActiveCities());
    promises.push(this.getAllFamilies());

    Promise.all(promises).then(() => {
      console.log("All promises worked");
    }).catch(() => {
      console.log("Error in promise");
    });
}

private getActiveCities(): Promise<void>  {
    return new Promise<void>((resolve, reject) => {
        //same code but adding resolve(); and reject();
    });
}

private getAllFamilies(): Promise<void>  {
    return new Promise<void>((resolve, reject) => {
        //same code but adding resolve(); and reject();
    });
}

使用异步：

async ngOnInit() {
    await this.getActiveCities();
    await this.getAllFamilies();
}

通过回调，我尝试了类似于：https ://stackoverflow.com/a/21518470/5785332

我还尝试从类似问题的答案中实现解决方案：async/await in Angular `ngOnInit`