Angular 具有多个*ngFor的表单上的模型绑定问题

我正在使用一个表单，其中我将以下模型重复了几次：

• 我有一个选择，我可以选择任何类型的

  瓶子

• 我可以选择所选类型的瓶子数量的输入

对2个瓶子阵列重复此模式（瓶类型由

Id

和

名称

组成），如下所示：

• 一个

  orderedBaggles

  数组，用户可以在其中订购一些瓶子
• 一个

  ReturnedBaggles

  数组，用户可以在其中返回一些瓶子

我希望能够在提交时选择任何类型的瓶子和相应的计数，但我相信我遗漏了一些东西，因为行为都很混乱：

• 两个阵列的输入相互连接
• 当我在选择中更改某些选项时，有时会更新其他选择，这显然不是我想要的

以下是plunkr中的一个工作示例：

---

这是我的html文件（我使用的是AngularMaterial 2）：

---

我不知道这为什么不能正常工作，很可能是因为我没有像我应该的那样管理

*ngFor

。我看到过关于

for

*ngFor

的帖子，但我不知道这是否有用。

你正在克隆

瓶阵列。但在您的情况下，瓶子对象不是克隆的。相同的引用被推送到两个数组中

看看这个

您可能必须使用
对象。为每个瓶子对象指定
。
如果有嵌套对象，则必须遍历属性并进行复制。
工作正常。谢谢！对于需要帮助的人：我在答案的链接中发布了我自己的deepClone（）方法。
  <div fxLayout="row" style="max-width: 80%">

    <!-- ORDERED BOTTLES -->
    <div fxLayout="column" style="min-width: 50%">
      <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of orderedBottles; let i = index">
        <md-select class="select" placeholder="Select bottle type" name="orderedTypeSelect_{{i}}" [(ngModel)]="orderedBottles[i].typeId">
          <md-option class="options" *ngFor="let type of orderedClonedArrayBottles" [value]="type.typeId">
            {{ type.name }}
          </md-option>
        </md-select>

        <md-input-container class="container">
          <input md-input type="number" name="orderedBottleInput_{{i}}" autocomplete="off" [(ngModel)]="orderedBottles[i].count"
          step="1" min="0" max="99">
        </md-input-container>

        <button class="button-row" type="button" (click)="removeRow(i, 'order')">-</button>
      </div>
    </div>

    <!-- RETURNED BOTTLES -->
    <div fxLayout="column" style="min-width: 50%">
      <div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of returnedBottles; let j = index">
        <md-select class="select" placeholder="Select bottle type" name="returnedTypeSelect_{{j}}" [(ngModel)]="returnedBottles[j].typeId">
          <md-option class="options" *ngFor="let typed of returnedClonedArrayBottles" [value]="typed.typeId">
            {{ typed.name }}
          </md-option>
        </md-select>

        <md-input-container class="container">
          <input md-input type="number" name="returnedBottleInput_{{j}}" autocomplete="off" [(ngModel)]="returnedBottles[j].count"
          step="1" min="0" max="99">
        </md-input-container>

        <button class="button-row" type="button" (click)="removeRow(j, 'return')">-</button>
      </div>

    </div>
  </div>

ngOnChanges(changes) {
    // Get @Input data when it's ready
    if (changes.bottleArray) {
      // Cloning
      //this.orderedClonedArrayBottles = [...changes.bottleArray.currentValue];
      //this.returnedClonedArrayBottles = [...changes.bottleArray.currentValue];

      this.orderedClonedArrayBottles = Array.from(changes.bottleArray.currentValue as Bottle[]);
      this.returnedClonedArrayBottles = Array.from(changes.bottleArray.currentValue as Bottle[]);

      console.log(this.orderedClonedArrayBottles);
      console.log(this.returnedClonedArrayBottles);

      // Display first rows
      if (this.orderedClonedArrayBottles.length > 0) {
        this.orderedBottles.push(this.orderedClonedArrayBottles[0]);
      }
      if (this.returnedClonedArrayBottles.length > 0) {
        this.returnedBottles.push(this.returnedClonedArrayBottles[0]);
      }
    }
  }