États et ville non peuplées dans la liste déroulante

Je suis nouveau dans l'angulaire et je rencontre des problèmes avec une liste déroulante dynamique des pays et des villes. Bien que j'ai vérifié beaucoup de réponses dans Stackoverflow, je ne suis pas en mesure d'obtenir une image claire sur la manière dont nous devrions réussir à obtenir les résultats souhaités.

countries: {};
states: {};
cities: {};

ngOnInit() {
    this.getCountry()
}

<div class="form-group">
                <select formControlName="country" class="form-control" (change)="onChangeCountry($event.target.value)">
                  <option value="">Select country...</option>
                  <option *ngFor="let country of countries" [value]="country.id">{{country?.name}}</option>
                </select>
            </div>

              <div class="form-group">
                <select formControlName="state" class="form-control" 
           (change)="onChangeState($event.target.value)">
                  <option value="">Select state...</option>
                  <option *ngFor="let state of states" [value]="state.id">{{state?.name}}</option>
                </select>
              </div>
              <div class="form-group">
                <select formControlName="city" class="form-control">
                  <option value="">Select city...</option>
                  <option *ngFor="let city of cities" [value]="city.id">{{city?.name}}</option>
                </select>
              </div>


 getCountry(){
    this._country.getCountries().subscribe((res: any) =>{
        this.countries = res.data;
    });
}
onChangeCountry(countryId: number) {
  if (countryId) {
    this._country.getStates(countryId).subscribe(
      data => {
        console.log(data)
        this.states = data;
        this.cities = null;
      }
    );
  } else {
    this.states = null;
    this.cities = null;
  }
}
onChangeState(stateId: number) {
  if (stateId) {
    this._country.getCities(stateId).subscribe(
      data => 
      this.cities = data
    );
  } else {
    this.cities = null;
  }
}