Как установить значение динамического каскадного выпадающего в угловых?

Question

Я работаю над приложением Angular 6, в котором используются реактивные формы. В форме у меня есть раскрывающийся список для регионов, который заполняется на основе выбранного значения в другом раскрывающемся списке для стран. Проблема заключается в том, что когда значение списка стран установлено во время отображения данных, извлеченных из базы данных, происходит событие его изменения (которое загружает регионы для выбранной страны). Это событие изменения не завершается до того, как оно пытается установить значение региона для редактируемой записи, и поэтому правильное значение региона никогда не устанавливается.

Ниже мой код:

constructor(
    public fb: FormBuilder,
    private dataservice: DataService
)
{
    this.form = this.fb.group({
        country: [null],
        region: [null]
    });
}

ngOnInit(): void {

this.form
      .get("country")!
      .valueChanges.pipe(debounceTime(200))
      .subscribe(countryName => {

            this.form.patchValue({
              region: null
            });

            this.loadRegions(countryName);
      });

this.loadCountriesList();

this.loadData();

}

private loadCountriesList() {
    this.countriesList = [];

    this.dataservice.getCountries().subscribe((countries) => {
        this.countriesList = countries;

        if (countries.length > 0) {
            this.form.controls["country"].setValue("US");
        }

    });
}

private loadRegions(countryName: string) {
    this.regions = [];

    this.dataservice
        .getRegions(countryName)
        .subscribe((regions) => {
            this.regions = regions;
        });
}

loadData(){
    this.dataservice.getRecord(5).subscribe(data => {
        this.form.patchValue({
            country: data.countryName;
            region: data.region; //Problem: the value of the region is not set here
        });
    });
}

Не уверен, что я делаю что-то не так или есть другой / лучший способ сделать то же самое.

Answer 1

Я думаю, вы должны поместить this.loadCountriesList () и this.loadData (); ниже непосредственно this.loadRegions (countryName);

ngOnInit(): void {

   this.form
  .get("country")!
  .valueChanges.pipe(debounceTime(200))
  .subscribe(countryName => {

        this.form.patchValue({
          region: null
        });

        this.loadRegions(countryName);
        this.loadCountriesList();
        this.loadData();
  });



 }