Question

我的离子项目中有一个表单，其中有2个下拉菜单，可以选择“ ion-select”。

当用户在第一个下拉菜单中选择一个选项时，它将在第二个下拉列表中生成这些选项。这很好。

添加新字段时，可以在.ts中重新建立以[[ngModel）] = null显示的第一个列表的值，但是我无法在2下拉列表中重新建立这些值。

这是我拥有的标记

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

这是我的代码.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)
 }

我希望第二个离子选择器根据第一个离子选择器进行选择，如果我动态添加新字段，则新值是独立的。

Answer 1

我终于解决了。

buildGroup(): FormGroup {

return this.fb.group({

selectedSubcategory: [""],
});


CountryChange(value, index:number) {

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

    }

和HTML

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

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

Ionic 4 ion-select基于第一个下拉菜单选择动态生成两个下拉菜单，如何清除第二个下拉菜单？

1 个答案: