Question

我有一个注册页面，其中有3个组合框。一个包含国家名称，第二个包含州名，第三个包含区名。因此，当我选择一个国家/地区时，应该出现相应的州，当我选择州/州时，应该出现相应的地区。我有json contaiing区，并指出文件位置asset / 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

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

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

您要根据所选状态更改地区下拉列表的值。因此，您要做的是先在页面加载时加载状态，然后将它们分配给状态数组。每当用户更改状态时，请重新加载Districts阵列。因此，您的代码将如下所示：

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

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

离子2：如何基于json 2在以前的下拉菜单中显示第二个下拉数据

2 个答案: