Pobieranie danych przed renderowaniem komponentu / pliku HTML w Angular

Proszę, mam problemy z pracą z niektórymi danymi asynchronicznymi na angular, które pochodzą z mojego API. Spędziłem trochę czasu, próbując wymyślić, jak się skalować, ale nadal utknąłem.

Scenariusz Będąc w trybie edycji formularza pacjenta, muszę zadzwonić do serwisu mojego centrum, aby uzyskać wszystkie dostępne ośrodki z db. Po zwróceniu danych muszę je przetworzyć, aby sprawdzić, do których ośrodków należy pacjent, a następnie użyć tego w html. Ale widzę, że komponent renderuje się, zanim dane zostaną odebrane. Dzieje się tak, ponieważ kiedy klikam przycisk Zapisz, aby sprawdzić dane, widzę tam dane. Ale w metodzie, w której muszę napisać jakąś logikę, kiedy próbuję sprawdzić dane zwrócone z API, pozostaje ona niezdefiniowana.

Uwaga: nie mogę w tym przypadku użyć resolwera, ponieważ nie używam linku routera do nawigacji na tę stronę.

Próbowałem użyć potoku asynchronicznego, aby warunkowo sprawdzić i wyrenderować kod HTML tylko wtedy, gdy otrzymam dane, co było rozwiązaniem, które działało dla kogoś innego. Ale wydaje się, że to nie działa w moim przypadku, ponieważ nadal jestem niezdefiniowany w zmiennej, która jest wewnątrz metody i gdzie muszę przetworzyć zwrócone dane przed wyświetleniem mojego komponentu / html.

Cel Celem jest najpierw pobranie wszystkich centrów przed zainicjowaniem formularza reaktywnego, aby móc obsłużyć dane w metodzie getPatientCentres (). Zamierzam użyć danych uzyskanych z API do wstępnego wypełnienia tablicy podczas tworzenia formularza.

Zrobiłem inne kroki i badania, ale wydaje się, że rozwiązanie nie rozwiązuje mojej sprawy.

Każda pomoc lub logika postępowania będzie bardzo mile widziana.

Oto mój kod TS

  export class Patient2Component implements OnInit {
  formTitle: string;
  patientForm: FormGroup;
  centreList: ICentre[] = [];
  loadedData: boolean = false;
  patient: IPatient;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private centreService: CentreService,
  ) { }

  ngOnInit() {
    this.getCentres();
    this.initCentreForm();
    this.checkParamsForEditAction();
  }

  initCentreForm() {
    this.patientForm = this.fb.group({
      id: [null],
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      centres: [this.centreList]
    });
  }

  getCentres() {
    this.centreService.getCentres().subscribe(res => {
      this.centreList = res;
      // this.loadedData = true;
    });
  }

  checkParamsForEditAction() {
    this.activatedRoute.data.subscribe(data => {
    this.patient = data['patient'];
    if (this.patient) {
      this.formTitle = 'Edit Patient';
      this.getPatientCentres(this.patient);
      this.assignValuesToControl(this.patient);
    }
   });
  }

  assignValuesToControl(patient: IPatient) {
      this.patientForm.patchValue({
        id: patient.id,
        firstName: patient.firstName || '',
        lastName: patient.lastName || '',
      });
  }

  getPatientCentres(patient: IPatient) {
    const patientCentres = patient.patientCentres;

    /**Here, the centreList is undefined since data has not returned yet
     * And i need this data for processing.
     */
    console.log(this.centreList);
  } 

  save() {
     /**Here, i can see the data  */
     console.log(this.centreList);   
   }