動態選擇選項離子2

我有2選擇在離子2，我能夠動態填充第二個基於在第一個選擇的值。但我不能在羣體之後設置選定的默認選項。我想：動態選擇選項離子2

<ion-item> 
    <ion-label>City</ion-label> 
    <ion-select (ionChange)="setCity($event)"> 
     <ion-option selected >City1</ion-option> 
     <ion-option >City2</ion-option> 
    </ion-select> 
    </ion-item> 

    <ion-item> 
    <ion-label>Zona</ion-label> 
    <ion-select > 
     <ion-option *ngFor ="let location of locations[city]" 
       [selected] = location.selected > 
     {{location.zone}} 
     </ion-option> 
    </ion-select> 
    </ion-item> 

in .ts 

this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}], 
        'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]} 

setCity(event){ 
    this.city = event; 
}

有第二離子選擇填充

謝謝後沒有選擇值。

來源

2017-08-30 Mihai Miulescu

在第一個select元素上創建一個更改事件處理函數。然後讓它調用一個方法，傳遞所選的值。然後對所選值進行一些檢查，以確定是否要顯示下一個選擇，然後顯示列表。

看看這個StackOverflow的問題How to show second dropdown data based on previous dropdown selection

工作版本：https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/

UPDATE顯示默認選定的項目

你想顯示默認選定的項目，那麼你需要在你的添加這幾行html頁面

那樣：

 <ion-label>District</ion-label> 
<ion-select (ionChange). .... 
    <ion-option [value]="0" >select District</ion-option> 
     <ion-option [value]="sDistrict" *ngFor = ... 
</ion-select>

，並在你的類型的腳本添加這些線（.TS），如果你面對任何問題，然後讓我知道文件

export class HomePage { 
.... 
sState: number = "0"; 
sDistrict: number = "0"; 
..... 
}

。

來源

2017-08-30 11:45:34

我已經做到了這一點，它的工作原理就像在plnkr例子。但在第二選擇沒有選定的區域（默認選定項目） –

rahul帕特爾，沒有工作。 –

顯示你的代碼，它在plnkr例子中工作。你需要完整的代碼？ –

嘗試設置在離子選擇和價值屬性ngModel屬性在離子選擇像下面

<ion-label>Zona</ion-label> 
<ion-select [(ngModel)]="mLocation" > 
    <ion-option [value] = "location" *ngFor ="let location of locations[city]" 
      [selected] = location.selected > 
    {{location.zone}} 
    </ion-option> 
</ion-select>

來源

2017-08-30 16:55:49 SAJ

動態選擇選項離子2

回答

相關問題