javascript - tabla - menu desplegable vertical html

Cómo agregar valores en el menú desplegable en iónico 2 dinámicamente

Question

Quiero un menú desplegable en mi formulario. Sé cómo agregar opciones en el menú desplegable estáticamente, pero, quiero que sea dinámico.

Mi código

<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>

He escrito el código html para esto. Pero no sé qué hacer en mi archivo .ts. ¿Cómo asignar valores a los artículos?

Answer 1

Lo que debe hacer en su código es definir el conjunto de opciones y una variable para la opción seleccionada en Page.ts y en algún momento rellenarlo con objetos de opción. Así que defina la matriz como esta ... (estoy usando definiciones de TypeScript para cada propiedad aquí, porque por qué no)

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

    constructor() { }

Alternativamente, algo así también debería funcionar ...

    optionsList: any[] = [];

Y luego rellene la matriz con objetos de opción (cada objeto debe tener 2 propiedades y opcionalmente una 3ra si desea preseleccionar una opción).

Donde lo haga dependerá de si se está llenando asincrónicamente o no. Para este ejemplo, simplemente lo haré en el constructor ...

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

Y su código HTML debería verse más o menos así ...

<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

Necesita tener un modelo y una matriz. La matriz contendrá un conjunto de elementos que se mostrarán en "seleccionar".

El código del componente se verá a continuación:

export class Modal {

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

 selectedCategory = this.categories[0]; 

}

El código de la plantilla se verá a continuación:

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

Espero que esto ayude