Ionic-Options Conditional dynamic

Ionic Framework ionic-v3
1

I have a problem,

I need to make a conditional between 2 ionic-options that call ngFor from a node server.

I need that when I select one of the options in the 1st ion-option, in the 2nd it will be dead what the second one contains.

html

            <ion-item> 
              <ion-label>Productos</ion-label> 
              <ion-select FormControlName="Compra"> 
                <ion-option *ngFor="let item of itens" value="{{item.title}}">{{item.title}}</ion-option> 
              </ion-select> 
            </ion-item> 

            <ion-item> 
              <ion-label>Paquete</ion-label> 
              <ion-select FormControlName="Compra"> 
                <ion-option *ngFor="let itemsub of item.subcategoria">{{itemsub.titulo}}</ion-option> 
              </ion-select> 
            </ion-item>

ts

itens:any;  
todo = []

this.itens = [
      {
        id: '1',
        title: 'Categoria 1',        
        subcategoria :  [
                          { 
                            id: '1',
                            titulo:'Subcategoria 1'
                          },
                          { 
                            id: '2',
                            titulo:'Subcategoria 2'
                          },
                          { 
                            id: '3',
                            titulo:'Subcategoria 3'
                          }                          
                        ]
      },
      {
        id: '2',
        title: 'Categoria 2',
        subcategoria :  [
                          { 
                            id: '4',
                            titulo:'Subcategoria 4'
                          },
                          { 
                            id: '5',
                            titulo:'Subcategoria 5'
                          },
                          { 
                            id: '6',
                            titulo:'Subcategoria 6'
                          }                          
                        ]
      },
      {
        id: '3',
        title: "Categoria 3"
      }
    ];

Result that I need

1st ion-select = Category 1 == 2nd ion-select = Subcategory 1, Subcategory 2, Subcategory 3

1st ion-select = Category 2 == 2nd ion-select = Subcategory 4, Subcategory 5, Subcategory 6

[https://stackoverflow.com/questions/51775938/ionic-options-conditional-dynamic]

2

Have you seen this?

1 Like