Ionic 2：如何根据 ionic 2 中的先前下拉选择和 json 显示第二个下拉数据

Question

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

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

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

将状态数组从 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

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

在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>

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