Ionic 4 ion-select dynamically generated two dropdown based on first dropdown selection, How do I clear the second dropdown?

Ionic Framework ionic-v3
1

Good day, I’m new in Ionic, I have a form in my ionic project that has 2 dropdown menus of selection ion-select. When the user selects an option in the first dropdown menu, it generates the options in the second dropdown list. This works well. when I add new fields, I can reestablish the values of the first list displayed with [(ngModel)] = null in .ts, but I have not been able to reestablish those in the 2 drop-down list.

problem%202
problem 2.png960×660 27.8 KB
problem
problem.jpg926×618 70.7 KB

thank you

 <div formArrayName="sucursales" margin-bottom>

     <!--generate new registration fields-->
     <section [formGroupName]="i" *ngFor="let tech of   form.controls.sucursales.controls; let i = index">

                <ion-item>
                    <ion-icon name="list" item-start></ion-icon>
                    <ion-label>Departamento</ion-label>
                    <ion-select [(ngModel)]="locate" name="country" #country formControlName="country" (ionChange)="CountryChange($event)">
                        <ion-option *ngFor="let department of ubicacion; let i = index" value="{{department.departamento}}">{{department.departamento}}</ion-option>
                    </ion-select>
                </ion-item>

                <ion-item *ngFor="let x of selectedMunicipality">
                    <ion-icon name="list" item-start></ion-icon>
                    <ion-label>Municipio</ion-label>
                    <ion-select [(ngModel)]="locates" name="state" #state formControlName="state">
                        <ion-option *ngFor="let municipio of x.ciudades" value="{{municipio}}">{{municipio}}</ion-option>
                    </ion-select>
                </ion-item>





       //code .ts

       this.http.get('http://localhost/ionic-php-mysql/colombia.json').map(res => res.json()).subscribe(
    data => {

        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        this.ubicacion = data.colombia;
    },
    error => {
        console.log("Oops!", error);
    }

);

   CountryChange(value: string) {

          this.locate = null;  //It works well
          this.locates = null; //it does not work

          this.selectedMunicipality = this.ubicacion.filter(item =>      item.departamento === value)
 }


.
2

hey, did u get any solution for above problem?

3

I finally resolved.

buildGroup(): FormGroup {

return this.fb.group({

selectedSubcategory: [""],
});


CountryChange(value, index:number) {

this.productos.controls[index]selectedMunicipality = this.ubicacion.filter(item =>        item.departamento === value)

    }

and in HTML

(ionChange)="CountryChange($event,i)"

<ion-item *ngFor="let x of tech.selectedMunicipality">