IonSelect and ionCheckBox not working when binding with Array variables

Question

I am doing an app with ionic 2 angular 2 and typescript. I wanted to create an ionSelect for every Passenger of Passengers (of a flight):

<div *ngFor="let Pass of Passengers; let i=index">
  <ion-item no-lines>
    <h2 item-left>{{'PERSONS'|translate}}</h2>
    <ion-select item-right [(ngModel)]="Passengers[i].PersonType"  placeholder="" (ionChange)="CONSOLES()">
      <ion-option value="Bébé (0-2)"> {{'BABYPERSONTYPE'|translate}}</ion-option>
      <ion-option value="Enfant (2-12)">{{'ENFANTPERSONTYPE'|translate}}</ion-option>
      <ion-option value="Jeune (12-24)">{{'YOUNGPERSONTYPE'|translate}}</ion-option>
      <ion-option value="Adulte plus 24">{{'ADULTPERSONTYPE'|translate}}</ion-option>
    </ion-select>
  </ion-item>

As you can see I am loading the passengers from an array of Objects: Passengers and in each of those objects i have a value named PersonType that should have the person type chosen via the ionSelect for a particular Passenger.

The problem is that whenever i change an ion select value for one passenger, all the other passengers get their values changed as well.

Here is a Picture of my app :

What i wanted to say is that when i change the value of the first passenger from "Adult above 24" to an other value, all passengers get their values changed too and this is not intended to happen.

NOTE : I tried the Binding of the ion select with [(ngModel)]="Pass.PersonType" but it didn't work either.

NOTE This exact problem happens with ion Checkboxes when they are bound to values inside arrays

So what is the problem?

@SwapnilPatwa Passengers Array holds at start one passenger object : passenger ={ PersonType:"Bébé (0-2)", Name:"", Birth:new Date("1970-01-01"), }; and then will be filled dynamically with the same objec type whenever the user clicks on the add button — Kaki Master Of Time
– Kaki Master Of Time, Commented Jul 20, 2017 at 11:56
@MedMansour As said before, the Plunker works fine, where is the issue reproduced? — AVJT82
– AVJT82, Commented Jul 20, 2017 at 15:45

AVJT82 · Accepted Answer · 2017-07-21 09:26:18Z

2

As per seen in plunker you are pushing the same object passenger to your array:

this.Passengers.push(this.passenger);

This means that every time you push the passenger, all objects have the same reference. So whatever you do to one object, will affect the other objects as well.

This can be solved using Object.assign which assigns the values from passenger to a new object:

this.Passengers.push(Object.assign({}, this.passenger));

PLUNKER

answered Jul 21, 2017 at 9:26

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaki Master Of Time Over a year ago

Thanks! That was it.

AVJT82 Over a year ago

Glad to hear it work! Have a nice weekend and happy coding! :)

Collectives™ on Stack Overflow

IonSelect and ionCheckBox not working when binding with Array variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related