Ionic 2: Как отобразить данные второго раскрывающегося списка на основе предыдущего выбора раскрывающегося списка в ионном 2 с JSON - PullRequest
Новая
       6

Ionic 2: Как отобразить данные второго раскрывающегося списка на основе предыдущего выбора раскрывающегося списка в ионном 2 с JSON

0 голосов
/ 28 февраля 2019

У меня есть страница регистрации, на которой у меня есть 3 списка.Один содержит названия стран, второй содержит штат, а третий содержит округ. Поэтому, когда я выбираю страну, должен прийти соответствующий штат, а когда я выбираю штат, должен прийти соответствующий округ.У меня есть json, связывающий районы и штаты, которые в файле местоположения assets / 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>

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Вы хотите изменить значения выпадающего списка в зависимости от выбранного состояния.Итак, что вам нужно сделать, это сначала загрузить состояния при загрузке страницы и присвоить их массиву состояний.Всякий раз, когда пользователь меняет состояние, перезагрузите массив 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>

Вы можете использовать ту же логику для загрузки состояний на основе выборастраны.

0 голосов
/ 28 февраля 2019

я создал для штатов и округов.Поэтому, когда вы нажимаете на штат, районы выбранного штата будут загружены здесь.

Назначить массив состояний от 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;
...