設置離子選項和動態值

Question

我們怎樣才能使一個<ion-select >（離子V2）與動態值（離子選項）。

的vaules應該從JSON對象令牌如下所示。

{ 
    "direction":[ 
     { 
     "idd":"1", 
     "villedepart":"kasserine", 
     "villearrive":"sfax", 
     "ligne_direction":"kasserine sfax" 
     }, 
     { 
     "idd":"6", 
     "villedepart":"sousse", 
     "villearrive":"tunis", 
     "ligne_direction":"sousse tunis" 
     }, 
     { 
     "idd":"9", 
     "villedepart":"nabeul", 
     "villearrive":"sousse", 
     "ligne_direction":"nabeul sousse" 
     } 
    ], 
    "success":1 
} 

Answer 1

這可以簡單地用其存儲在一個變量的JSON，這裏e.g values完成。然後你通過values.direction迭代，並顯示你想要的屬性，這裏villedepart：

<ion-item> 
    <ion-label>Values</ion-label> 
    <ion-select [(ngModel)]="selectedValue"> 
    <ion-option *ngFor="let val of values.direction">{{val.villedepart}}</ion-option> 
    </ion-select> 
</ion-item> 

Plunker

檢查this link的離子選擇。

，當你得到你的數據直接從響應，這意味着你可以遍歷直接值提取陣列您可選擇：

服務：

getData() { 
    return this.http.get('url') 
    .map(res => res.json().direction) // this here! 
} 

組件：

this.myService.getData() 
    .subscribe(data => { 
    this.values = data; 
    }); 

然後像這樣迭代：

<ion-option *ngFor="let val of values">{{val.villedepart}}</ion-option>