如何动态地在离子2中的下拉列表中添加值

Question

I want a dropdown in my form. I know how to add options in dropdown statically, but, I want it to be dynamic.

My code

<ion-item>
    <ion-label>Select Type</ion-label>
    <ion-select [(ngModel)]="selectedvalue" #item>
        <ion-option *ngFor="let item of items" [value]="item">{{item}}</ion-option>
    </ion-select>
</ion-item>

I have written the html code for this. But I don't know what to do in my .ts file. How to assign values to items?

Answer 1

What you need to do in your code is define the options array and a variable for the selected option in Page.ts and at some point populate it with option objects. So define the array like this... (i'm using TypeScript definitions for each property here because why not)

export class Page {
    selectedValue: number;
    optionsList: Array<{ value: number, text: string, checked: boolean }> = [];

    constructor() { }

Alternatively just something like this should also work...

    optionsList: any[] = [];

And then populate the array with option objects (each object should have 2 properties and optionally a 3rd if you want to pre-select an option).

Where you do this will depend on if it is being populated asynchronously or not. For this example I will just do it in the constructor...

constructor() {
     this.optionsList.push({ value: 1, text: 'option 1', checked: false });
     this.optionsList.push({ value: 2, text: 'option 2', checked: false });
}

And your HTML code should look something like this...

<ion-select [(ngModel)]="selectedvalue">
    <ion-option *ngFor="let item of optionsList" value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</ion-option>
</ion-select>

Answer 2

You need to have one model and one array. Array will contain set of items which will be displayed in "select".

The component code will look like below:

export class Modal {

categories = [
 {
   title: 'Locked',
   price: 100 
 },
 {
   title: 'Liquid',
   price: 8000
 }];         

 selectedCategory = this.categories[0]; 

}

Template code will look like below:

<ion-item>
    <ion-select [(ngModel)]="selectedCategory">
          <ion-option *ngFor="let category of categories;" 
                  [value]="category">{{category.title}}</ion-option>      
    </ion-select>
</ion-item> 

Hope this will help.