2017-07-20 5 views
2

イオン2の角2とタイプスクリプトを使用しています。乗客およびこれらのオブジェクトのそれぞれに、私は価値があります。配列変数でバインドするとIonSelectとionCheckBoxが機能しません

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

あなたは私がオブジェクトの配列から乗客をロードしています見ることができるように:私は(飛行機の)乗客のすべての乗客ionSelectを作成したいです特定の旅客のためにionSelectを介して選択された人のタイプを持つべきPersonTypeという名前のPersonType。

問題は、1人の乗客のイオン選択値を変更すると、他のすべての乗客も値が変更されるということです。ここで

は私のアプリの画像です:

私が言いたかった何

enter image description here

は、私が他の値に「24以上の大人」からの最初の乗客の値を変更した場合ということです、すべての乗客彼らの価値も変わってしまいました。これは起こることを意図していません。

:私は[(ngModel)] = "Pass.PersonType"と選択イオンの結合を試みたが、それはどちらか動作しませんでした。

NOTEそれらが配列

内部の値にバインドされている場合は、この正確な問題は、それで問題は何であるイオンのチェックボックスとどうなりますか?

+0

はあなたが私に 'CONSOLES()'コードを表示することができます:

これは、新しいオブジェクトへpassengerから値を割り当てるObject.assignを使用して解決することができますか? –

+0

これは単なるconsole.log(this.Passengers) –

+0

あなたは 'Passengers'配列を共有できますか? –

答えて

2

あなたの配列に同一のオブジェクトpassengerを推進しているplunkerで見たようあたり:

this.Passengers.push(this.passenger); 

これは、あなたが乗客を押すたびに、すべてのオブジェクトは、同一の参照を持っていることを意味します。ですから、あなたが1つのオブジェクトに対して行うことは、他のオブジェクトにも影響します。

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

PLUNKER

+0

ありがとう!それはそれだった。 –

+0

うれしいことを聞いてうれしい!素敵な週末と幸せなコーディングを! :) – Alex

関連する問題