Ionic 2 - 如何根据先前的下拉选择显示第二个下拉数据 [英] Ionic 2 - How to show second dropdown data based on previous dropdown selection
问题描述
我是 Ionic 2 的新手.我只有 Ionic 2 的表面基础知识.我试图根据第一个选择获得第二个下拉列表.我已经提到了同样的问题,但他们都没有使用 Ionic.由于我是 Ionic 2 的新手,我不知道如何在 Ionic 2 中实现 ionChange.这是我在 .html 中的代码部分
I am new to Ionic 2. I'm only have a surface basic of Ionic 2. I am trying to get a second dropdown based on the first selection. I already refer to the same problem but none of them using Ionic. Since I am new to Ionic 2, I dont know how to implement ionChange in Ionic 2. This is my part of code in .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
注意:实际数据很多来自以下数据.
Note: The actual data is many from the below data.
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}
];
}
我首先要做的是根据第一个下拉列表获得第二个下拉列表.然后从第一个和第二个下拉列表中的选择中,我想列出所有城市名称.
What I'm trying to do is first I want to get second dropdown based on the first dropdown. And then from both selection in first and second dropdown, I want to listing all the name of city.
推荐答案
在第一个 select 元素上创建更改事件处理程序.然后调用一个方法,用它传递选定的值.然后对选定的值进行一些检查,以确定是否要显示下一个选择,然后显示列表.
Create a change event handler on the first select element. Then have that call a method, passing the selected value with it. Then do some checks on the selected values to determine if you want to show the next select and then the list.
*.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 匹配的地区.城市也是如此.
Select your state, filter for only the districts that have a state_id that matches the selected state ID. The same thing is done for the cities.
工作版本:https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/
这篇关于Ionic 2 - 如何根据先前的下拉选择显示第二个下拉数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!