Question

我在离子2中有2个选择，我能够根据第一个选择的值动态填充第二个。但我无法在填充后设置所选的默认选项。我试过了：

<ion-item>
    <ion-label>City</ion-label>
    <ion-select  (ionChange)="setCity($event)">
      <ion-option selected >City1</ion-option>
      <ion-option >City2</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Zona</ion-label>
    <ion-select >
      <ion-option  *ngFor ="let location of locations[city]" 
                 [selected] = location.selected >
        {{location.zone}}
      </ion-option>
    </ion-select>
  </ion-item>

 in .ts

 this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
                  'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}

 setCity(event){
    this.city = event;
 }

填充第二个离子选择后没有选定的值

谢谢。

Answer 1

在第一个select元素上创建一个change事件处理程序。然后调用一个方法，用它传递选定的值。然后对所选值进行一些检查，以确定是否要显示下一个选择，然后显示列表。

查看此StackOverflow问题How to show second dropdown data based on previous dropdown selection

工作版本：https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/

更新显示默认选定项目

您想要显示默认选择项目，然后您需要在 html页面中添加这几行

像那样：

     <ion-label>District</ion-label>
 <ion-select (ionChange). ....
     <ion-option [value]="0" >select District</ion-option>
      <ion-option [value]="sDistrict" *ngFor = ...
</ion-select>

并在类型脚本（.ts）文件中添加这些行

export class HomePage {
 ....
sState: number = "0";
sDistrict: number = "0";
.....
}

如果您遇到任何问题，请告诉我。

Answer 2

尝试在ion-option中的ion-select和value属性中设置ngModel属性，如下所示

<ion-label>Zona</ion-label>
<ion-select [(ngModel)]="mLocation" >
  <ion-option [value] = "location" *ngFor ="let location of locations[city]" 
             [selected] = location.selected >
    {{location.zone}}
  </ion-option>
</ion-select>

动态选择选项离子2

2 个答案: