Ionic 2 Populate Select Options From Json
I'm trying to dynamically populate a ion-select dropdown with a json object. My html component looks like this:
Solution 1:
The [selectOptions] are used to pass creation options (docs). So you should make an iterable out of your json-object and use *ngFor.
*ngFor example:
A neat way of accessing object keys and values are by making use of Object.keys as suggested in this answer and shown below.
@Component({
selector: 'my-page',
templateURL: 'my-page.html
})
export classMyPage {
// Make Object.keys available
objectKeys = Object.keys;
value = { option1: 'foo', option2: 'bar' };
constructor(){}
}
HTML
...
<ion-select [(ngModel)]="value" [required]="true" [name]="value"><ion-option *ngFor="let option of objectKeys(value)">
{{ value[option] }}
</ion-option></ion-select>
...
This way theres no need to implement a custom pipe that basically does the same thing.
Solution 2:
Have you perhaps tried...
<ion-select [selectOptions]="{
title: 'Pizza Toppings',
subTitle: 'Select your toppings',
mode: 'md'
}"></ion-select>
Post a Comment for "Ionic 2 Populate Select Options From Json"