Help with ion-select ngModel automatically selects all the boxes

[millerjn]

Hello!

Because when you select and press ok has one and go back to open I activate all the ion-option?

Note: I do not speak English, please write well for a better translation into Spanish.

<ion-item>
  <ion-label>Watering Mode</ion-label>
  <ion-select [(ngModel)]="plato.kind">
    <ion-option *ngFor="let item of modeKeys" [value]="item">{{item.key}}{{item.precio}}</ion-option>
  </ion-select>
</ion-item>

pedidos.ts

plato={
kind: ‘key’

}
modeKeys = [
{‘key’:“pablo”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},
{‘key’:“lili”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},
{‘key’:“juan”,“precio”:“500”},

]

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/1/d/1db28e04c831a467f873e97f6db12daf8565b279.png" width="690" height="387">

[rapropos]

Check out a brand-new scratch project. Copy enough code from your app to this scratch project so that the problem can be replicated. Post that code - AS TEXT, NOT IMAGES, and properly formatted with code block fences. Be sure to include everything needed to reproduce the problem.

[Sujan12]

(I changed your post to format your code or error message correctly. Please use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.)

@millerjn

Hello! I have a problem with the ion-select that activates me all the ion-option, as I do so that they appear without selecting me and when from ok and return to open I am appearing the selected

This doesn’t make too much sense in English. Could you maybe rerwrite it or just post this sentence in Spanish please? (Eso sentencia no es comprensible, por favor escribe otra vez en Espanol. Gracias. [or something like that, my Spanish really sucks])

[millerjn]

lo que pasa es que necesito guardar el valor del json capturado por el ion-select y no todo el json como se muestra en la imagen me muestra que selecciona todos sin importar que opción elija

pedido.html

<ion-header>

  <ion-navbar>
    <ion-title>Has tu pedido</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding >

  <ion-item>
   <ion-label>Menu</ion-label>
<ion-select [(ngModel)]="plato.checked" (ionChange)="optionsFn(item) ">

  <ion-option [value]="item" *ngFor="let item of optionsPlatos"    >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

<!--Carnes-->
 <ion-item>
   <ion-label>Carnes</ion-label>
<ion-select [(ngModel)]="carnes.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of optionsCarnes" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>



<!---Sin-->
   <ion-item>
   <ion-label>Sin</ion-label>
<ion-select [(ngModel)]="sin.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of optionsSin" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

<!---Poco-->
   <ion-item>
   <ion-label>Poco</ion-label>
<ion-select [(ngModel)]="poco.checked" (ionChange)="optionsFn(item);">

  <ion-option [value]="item" *ngFor="let item of Poco" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>

  <!--Añadir-->
   <ion-item>
   <ion-label>Adiciona</ion-label>
<ion-select [(ngModel)]="adicionar.checked" (ionChange)="optionsFn(item)" >

  <ion-option [value]="item" *ngFor="let item of Adicionar" multiple="false" >{{item.name}} &nbsp;&nbsp;{{item.price}}</ion-option>
   

</ion-select>
  </ion-item>








  <button ion-button (click)="Guardar()">Hacer pedido</button>



</ion-content>

pedido.ts

@Component({
  selector: 'page-pedidos',
  templateUrl: 'pedidos.html',
})
export class Pedidos {

pedidos: FirebaseListObservable<any>;
toppings:any;


  priceOp
  cheke
 
  nameOp


   optionsPlatos =  [
          {"name": "Sencillo","price": "100.00",checked: false},
          {"name": "Normal","price": "200.00",checked: false},

                    ];
  optionsCarnes =  [
          {"name": "res","price": 100.00,checked: false},
          {"name": "cerdo","price": 200.00,checked: false},
          {"name": "pezcado","price": 200.00,checked: false},
          {"name": "chorizo","price": 200.00,checked: false},
          {"name": "morcilla","price": 200.00,checked: false},
          {"name": "pollo","price": 200.00,checked: false},
                    ];  
   optionsSin =  [
          {"name": "Sin ensalada",checked: false},
          {"name": "Sin principio",checked: false},
          {"name": "Sin arroz",checked: false},
          {"name": "Sin tajada",checked: false},
          {"name": "Sin arepa",checked: false},
                    ];
   Poco =  [
          {"name": "Poco arroz",checked: false},
          {"name": "Poca ensalada",checked: false},
                    ];
  Adicionar =  [
          {"name": "Adiciona res","price": 100.00,checked: false},
          {"name": "Adiciona adcerdo","price": 200.00,checked: false},
          {"name": "Adiciona pezcado","price": 200.00,checked: false},
          {"name": "Adiciona chorizo","price": 200.00,checked: false},
          {"name": "Adiciona morcilla","price": 200.00,checked: false},
          {"name": "Adiciona pollo","price": 200.00,checked: false},
          {"name": "Adiciona arroz","price": 200.00,checked: false},
          {"name": "Adiciona arepa","price": 200.00,checked: false},
                    ];

                    



plato:any= this.optionsPlatos;

carnes:any=this.optionsCarnes;

sin:any=this.optionsSin;

poco:any=this.Poco;
adicionar:any=this.Adicionar;



public optionsFn(nuevo): void { 
    console.log(this.plato);

    let item = this.plato;

   this.cheke=item.checked;

    this.priceOp = item.price;
    
    this.nameOp = item.name;
    return nuevo
   
  }






   constructor(public navCtrl: NavController,public alertCtrl:AlertController, public database:AngularFireDatabase ) {
    this.pedidos = this.database.list('/menu');

  }

  Guardar(){
    





    this.pedidos.push({

     Platito: this.plato,
    
      
     Carnita: this.carnes,

     Adicionar: this.adicionar,

     SinCarnita: this.sin,

     poco: this.poco

    
  });


  // this.pedidos.push(this.carnes);
   // this.pedidos.push(this.toppings);
    
    

  }
}

[rapropos]

multiple goes on ion-select, not ion-option. Follow the examples in the documentation. Stop using any, and you do not need an onChange handler. You want something that looks more like:

export interface FoodItem {
  name: string;
  price?: number;
}

optionsPlatos: FoodItem[] = [
  {name: "Sencillo", price: 100},
  {name: "Normal", price: 200},
];

plato: FoodItem;

<ion-select [(ngModel)]="plato">
<ion-option *ngFor="let p of optionsPlatos" [value]="p">{{p.name}}: {{p.price}}</ion-option>
</ion-select>

[millerjn]

Json values are not seen

[rapropos]

Are you sure you copied the code properly? It works for me:

[millerjn]

Thank you, they appear, but I close and re-open and select everything, I need to remain selected

[rapropos]

If you’re saying you want multiple selection to be possible, add multiple="true" to the <ion-select> and change plato to be FoodItem[]. Again, all this is in the documentation.

[millerjn]

I do not want multiple selection, look open what you did dale select ok and return to habrilo select everything automatically

[rapropos]

Are you still doing this?

plato:any= this.optionsPlatos;

Don’t do that. It makes no sense. I said:

plato: FoodItem;

That means “leave it uninitialized”. <ion-select> is smart enough to cope with that.

[millerjn]

No, I’m doing the same example that you gave me, look habre the app choose a product dale ok and reopen and you will see that they are all automatically selected

[rapropos]

No, they aren’t. Only the one I chose before is selected.

[millerjn]

Well thank you very much, can you help me with something more please how would the sum of the prices be made?

<ion-item-sliding *ngFor="let item of meVendi|async" >
      <ion-item>
        <ion-label>
          <h1>Carlos Pidio</h1>
         
            <ion-list>
              <h2>{{item.Platito.name}} &nbsp;&nbsp;${{item.Platito.price}}</h2>
              <h2>{{item.carnita.name}} &nbsp;&nbsp;${{item.carnita.price}}</h2>
              <h2>{{item.Adicionar.name}} &nbsp;&nbsp;${{item.Adicionar.price}}</h2>
            </ion-list>  
        </ion-label>
      </ion-item>
      
   
    </ion-item-sliding>

[Sujan12]

@millerjn

can you help me with something more please how would the sum of the prices be made?

No, that is a different problem - please open a new topic and describe the problem fully. Thanks, I will close this topic now.