如何工作2選擇動力學離子3

Question

有人可以教我如何使用兩個動態選擇？例如，我首先選擇州，然後在第二選擇中顯示城市。我如何在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); 
    } 
} 
}