Ionic 2：如何根据以前使用json的离子2中的下拉选择显示第二个下拉数据

Question

我有一个注册页面，其中我有3个组合框。一个包含国家名称，第二个包含州名，第三个包含区域。当我选择一个国家对应的州应该来，而当我选择国家相应的区域应该来。我有json包含区域和状态，在文件位置资产/ data / region.js我该怎么做？请帮忙

import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatriproPage } from '../matripro/matripro';
import { LocationService } from '../../services/loc.service';

@Component({
    selector: 'page-matriloc',
    templateUrl: 'matriloc.html',
    
    providers: [ObsAuthService]
    
})
export class MatrilocPage{
    myjsondata: any;
    
    constructor(private nav: NavController, private auth: ObsAuthService,
        private alertCtrl: AlertController, private loadingCtrl: LoadingController,
        private myService: LocationService) {
        }

    selectChange(e) {
        console.log(e);
    }  
    
    public nxt(){
        this.nav.push(MatriproPage);
        
    }
    goback() {
             this.nav.pop();
}
}

<ion-header>
    <ion-navbar>
        <ion-title>Location Information</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <h1 class="h1">Location</h1>

    <ion-row>
        <ion-col>
            <ion-label>Country Living in:</ion-label>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-select  placeholder="Select">
                <ion-option [value]="sCountry" >India</ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <ion-label>Residing State:</ion-label>
        </ion-col>
        <ion-col>
            <ion-label>Residing City/District:</ion-label>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col >
            <ion-select  [(ngModel)]="sState" placeholder="Select">
                <ion-option [value]="state"></ion-option>
            </ion-select>
        </ion-col>
        <ion-col >
            <ion-select  [(ngModel)]="sDistrict" placeholder="Select">
                <ion-option [value]="districts"></ion-option>
            </ion-select>
        </ion-col>
    </ion-row>
    <ion-row>
            <ion-col>
                <button ion-button full color="secondary" block>Save</button>
            </ion-col>
            <ion-col>
                <button (click)="nxt()" ion-button full color="primary" block>Next</button>
            </ion-col>
        </ion-row>
</ion-content>

Answer 1

我为州和地区创建了。因此，当您单击状态时，将在此处加载所选状态的区域。

将states数组从json分配给states。选择状态时，将加载该状态的相应区域。我已经为州和地区做了这个，你也可以为国家做同样的事情。

在HTML中

<ion-content>
    <ion-item>
      <ion-select [(ngModel)]="selectedState">
        <ion-option *ngFor="let stateObj of states" [value]="stateObj">{{stateObj.state}}</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-select [(ngModel)]="selectedDistrict">
        <ion-option *ngFor="let district of selectedState.districts" [value]="district">{{district}}</ion-option>
      </ion-select>
    </ion-item>
</ion-content>

在ts

states  = []; // Assign the states from the json file
selectedState: any = {
districts : []
};
selectedDistrict: string;

Answer 2

您希望根据所选状态更改区域下拉列表的值。所以你要做的是首先在页面加载时加载状态并将它们分配给states数组。每当用户更改状态时，重新加载区域数组。所以你的代码将是这样的：

在ts文件中

selectedState;
selectedDistrict;
states = [];
districts = [];

ionPageDidEnter(){
   //Load all the states and assign to states array
}

loadDistrictsForSelectedState(selectedState : StateObject){
   //write your logic to get districts from json
   districts = newArrayOfDistrictsFetchedFromJson;
}

HTML：

<ion-row>
        <ion-col >
            <ion-select  [(ngModel)]="selectedState" ionChange = "loadDistrictsForSelectedState(selectedState) placeholder="Select">
                <ion-option *ngFor="let state of states" [value]="state">
                    {{state.name}}
                </ion-option>
            </ion-select>
        </ion-col>
        <ion-col >
            <ion-select  [(ngModel)]="selectedDistrict" placeholder="Select">
                <ion-option *ngFor="let district of districts" [value]="district">
                   {{district.name}}
                </ion-option>
            </ion-select>
        </ion-col>
    </ion-row>

您可以根据国家/地区的选择使用相同的逻辑来加载状态。