Ionic 2 - 如何根据先前的下拉选择显示第二个下拉数据

Question

我是 Ionic 2 的新手。我只有 Ionic 2 的表面基础知识。我正在尝试根据第一个选择获得第二个下拉列表。我已经提到了同样的问题，但没有一个使用 Ionic。由于我是 Ionic 2 的新手，我不知道如何在 Ionic 2 中实现 ionChange。这是我在 .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);
    }

选择您的州，仅筛选具有与所选州 ID 匹配的 state_id 的地区。城市也是如此。

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