Ionic 2 - Как показать данные второго раскрывающегося списка, основанные на предыдущем выпадающем списке

Question

Я новичок в Ionic 2. У меня есть только базовая поверхность Ionic 2. Я пытаюсь получить второе раскрывающееся меню, основанное на первом выборе. Я уже говорю о той же проблеме, но никто из них не использует Ionic. Так как я новичок в ионическом 2, я не знаю, как реализовать ionChange в ионическом 2. Это моя часть кода в .html

home.html

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

<ion-item> 
    <ion-label>District</ion-label> 
    <ion-select [(ngModel)]="district"> 
    <ion-option *ngFor = "let district of districts">{{district.name}}</ion-option> 
    </ion-select> 
</ion-item> 

<ion-list> 
    <ion-item *ngFor="let city of cities"> 
    <p>{{city.name}}</p> 
    </ion-item> 
</ion-list> 

home.ts

Примечание: Фактическими данными являются многие из приведенных ниже данных.

initializeState(){ 
    this.state = [ 
    {id: 1, name: 'Melaka'}, 
    {id: 2, name: 'Johor'}, 
    {id: 3, name: 'Selangor'} 
    ]; 
} 

initializeDistrict(){ 
    this.district = [ 
    {id: 1, name: 'Alor Gajah', state_id: 1, state_name: 'Melaka'}, 
    {id: 2, name: 'Jasin', state_id: 1, state_name: 'Melaka'}, 
    {id: 3, name: 'Muar', state_id: 2, state_name: 'Johor'}, 
    {id: 4, name: 'Segamat', state_id: 2, state_name: 'Johor'}, 
    {id: 5, name: 'Shah Alam', state_id: 3, state_name: 'Selangor'}, 
    {id: 7, name: 'Klang', state_id: 3, state_name: 'Selangor'} 
    ]; 
} 

initializeCity(){ 
    this.cities = [ 
    {id: 1, name: 'City of Alor Gajah 1', state_id: 1, district_id: 1}, 
    {id: 2, name: 'City of Alor Gajah 2', state_id: 1, district_id: 1}, 
    {id: 3, name: 'City of Jasin 1', state_id: 1, district_id: 2}, 
    {id: 4, name: 'City of Muar 1', state_id: 2, district_id: 3}, 
    {id: 5, name: 'City of Muar 2', state_id: 2, district_id: 3}, 
    {id: 6, name: 'City of Segamat 1', state_id: 2, district_id: 4}, 
    {id: 7, name: 'City of Shah Alam 1', state_id: 3, district_id: 5}, 
    {id: 8, name: 'City of Klang 1', state_id: 3, district_id: 6}, 
    {id: 9, name: 'City of Klang 2', state_id: 3, district_id: 6} 
    ]; 
} 

Что я пытаюсь сделать, это сначала я хочу получить второе раскрывающееся меню, основанное на первом выпадающем списке. И затем из обоих вариантов в первом и втором выпадающих списках я хочу указать все названия города.

Answer 1

Создайте обработчик события изменения на первом элементе выбора. Затем вызовите этот метод, передав ему выбранное значение. Затем выполните некоторые проверки выбранных значений, чтобы определить, хотите ли вы показывать следующий выбор, а затем список.

*.html ------- template 
<ion-content padding> 
    <ion-item> 
     <ion-label>State</ion-label> 
     <ion-select (ionChange)="setDistrictValues(sState)"[(ngModel)]="sState"> 
      <ion-option [value]="sState" *ngFor="let sState of states">{{sState.name}} </ion-option> 
     </ion-select> 
    </ion-item> 
    <ion-item *ngIf="selectedDistricts"> 
     <ion-label>District</ion-label> 
     <ion-select (ionChange)="setCityValues(sDistrict)" [(ngModel)]="sDistrict"> 
      <ion-option [value]="sDistrict" *ngFor="let sDistrict of selectedDistricts">{{sDistrict.name}}</ion-option> 
     </ion-select> 
    </ion-item> 
    <ion-list *ngIf="selectedCities"> 
     <ion-item *ngFor="let city of selectedCities"> 
       <p>{{city.name}}</p> 
     </ion-item> 
    </ion-list> 

*.ts ------- controller/component 
    public states: any[]; 
    public districts: any[]; 
    public cities: any[]; 

    public selectedDistricts: any[]; 
    public selectedCities: any[]; 

    public sState: any; 
    public sDistrict: any; 

    appName = 'Ionic App'; 

    constructor(public navController: NavController) { 
     this.initializeState(); 
     this.initializeDistrict(); 
     this.initializeCity(); 
    } 

    initializeState(){ 
    this.states = [ 
     {id: 1, name: 'Melaka'}, 
     {id: 2, name: 'Johor'}, 
     {id: 3, name: 'Selangor'} 
    ]; 
    } 

    initializeDistrict(){ 
    this.districts = [ 
     {id: 1, name: 'Alor Gajah', state_id: 1, state_name: 'Melaka'}, 
     {id: 2, name: 'Jasin', state_id: 1, state_name: 'Melaka'}, 
     {id: 3, name: 'Muar', state_id: 2, state_name: 'Johor'}, 
     {id: 4, name: 'Segamat', state_id: 2, state_name: 'Johor'}, 
     {id: 5, name: 'Shah Alam', state_id: 3, state_name: 'Selangor'}, 
     {id: 7, name: 'Klang', state_id: 3, state_name: 'Selangor'} 
    ]; 
    } 

    initializeCity(){ 
    this.cities = [ 
     {id: 1, name: 'City of Alor Gajah 1', state_id: 1, district_id: 1}, 
     {id: 2, name: 'City of Alor Gajah 2', state_id: 1, district_id: 1}, 
     {id: 3, name: 'City of Jasin 1', state_id: 1, district_id: 2}, 
     {id: 4, name: 'City of Muar 1', state_id: 2, district_id: 3}, 
     {id: 5, name: 'City of Muar 2', state_id: 2, district_id: 3}, 
     {id: 6, name: 'City of Segamat 1', state_id: 2, district_id: 4}, 
     {id: 7, name: 'City of Shah Alam 1', state_id: 3, district_id: 5}, 
     {id: 8, name: 'City of Klang 1', state_id: 3, district_id: 6}, 
     {id: 9, name: 'City of Klang 2', state_id: 3, district_id: 6} 
    ]; 
    } 

    setDistrictValues(sState) { 
     this.selectedDistricts = this.districts.filter(district => district.state_id == sState.id) 
    } 

    setCityValues(sDistrict) { 
     this.selectedCities = this.cities.filter(city => city.district_id == sDistrict.id); 
    } 

Выберите состояние, фильтр только для районов, которые имеют state_id, который соответствует выбранному состоянию ID. То же самое делается для городов.

Рабочая версия: https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/