如何工作 2 在 Ionic 3 中选择动态

Question

有人可以教我如何使用两个动态 select 吗？例如，我首先 select 州，然后在第二个 select 中显示城市。我如何在 Ionic 3 中制作它？

Answer 1

在你里面.html:

<ion-item>
    <ion-label>State</ion-label>
    <ion-select [(ngModel)]="selected_state" (ionChange)="stateSelect(selected_state)">
        <ion-option *ngFor="let item of states" value="{{item.name}}">{{item.name}}</ion-option>
    </ion-select>
</ion-item>

<ion-item>
    <ion-label>City</ion-label>
    <ion-select [(ngModel)]="selected_city">
        <ion-option *ngFor="let item of cities" value="{{item.name}}">{{item.name}}</ion-option>
    </ion-select>
</ion-item>

在你的.ts

 states = [
{
  name: 'state1'
},
{
  name: 'state2'
}
];
main_cities = [
{
  name: 'city1',
  state: 'state1'
},
{
  name: 'city2',
  state: 'state1'
},
{
  name: 'city3',
  state: 'state2'
},
{
  name: 'city4',
  state: 'state2'
}
];
cities=[];
selected_state;
selected_city;

public stateSelect(selected_state) {
this.cities=[];
for (let city of this.main_cities) {
  if (selected_state == city.state) {
    this.cities.push(city);
  }
}
}

如何工作 2 在 Ionic 3 中选择动态

How to work 2 selects dynamics in Ionic 3

select

ionic3