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

#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.

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?