javascript - 与数组变量绑定(bind)时，IonSelect 和 ionCheckBox 不起作用

Question

我正在用 ionic 2 angular 2 和 typescript 做一个应用程序。我想为(航类的)乘客的每个乘客创建一个 ionSelect:

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

如您所见，我正在从一组对象中加载乘客:乘客，在每个对象中我都有一个名为 PersonType 的值，该值应该通过 ionSelect 为特定乘客选择人员类型。

问题是，每当我为一位乘客更改 ionic 选择值时，所有其他乘客的值也会更改。

这是我的应用程序的图片:

我想说的是，当我将第一位乘客的值从“24 岁以上的成人”更改为其他值时，所有乘客的值也会发生变化，而这并不是故意发生的。

注意:我尝试使用 [(ngModel)]="Pass.PersonType" ionic 选择的绑定(bind)，但它也没有用。

注意当 ion 复选框绑定(bind)到数组中的值时，就会出现这个问题

那么问题是什么？

Answer 1

正如在 plunker 中看到的那样，您正在将同一个对象 passenger 推送到您的数组:

this.Passengers.push(this.passenger);

这意味着每次推送乘客时，所有对象都具有相同的引用。因此，无论您对一个对象做什么，都会影响其他对象。

这可以使用 Object.assign 来解决，它将 passenger 的值分配给一个新对象:

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

PLUNKER