Ionic 2 - 以前のドロップダウン選択に基づいて2番目のドロップダウンデータを表示する方法

Question

私はIonic 2を初めて使用しています。Ionic 2の基本的な表面しか持っていません。最初の選択に基づいて2番目のドロップダウンを取得しようとしています。私はすでに同じ問題を参照していますが、どれもがIonicを使用していません。私はイオン2に新しいですので、私はこれは.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

のコードの私の部分であるイオン2にionChangeを実装する方法を知りません注： 実際のデータは、以下のデータからの多くのものです。

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} 
    ]; 
} 

私がしようとしているのは、まず最初のドロップダウンに基づいて2番目のドロップダウンを取得することです。そして、最初と2番目のドロップダウンの両方の選択から、私は都市のすべての名前をリストしたいと思います。

Answer 1

最初のselect要素にchangeイベントハンドラを作成します。それから、選択した値を渡してメソッドを呼び出します。次に、選択した値をチェックして、次の選択を表示するかどうかを決定します。

*.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/