title: Issues with model bindings on Forms with several *ngFor
body: <p>I'm using a form where I have the following model repeated several times : </p>
  
  <ul>
  <li>I have a select where I can choose whatever type of <code>Bottle</code> I have.</li>
  <li>An Input where I can select the quantity of bottles for the selected type.</li>
  </ul>
  
  <p>This pattern is repeated for 2 arrays of Bottle (the <code>Bottle</code> type is made of an <code>Id</code> and a <code>Name</code>) as followed : </p>
  
  <ul>
  <li>An Array of <code>orderedBottles</code> where the user can order some bottles.</li>
  <li>An Array of <code>returnedBottles</code> where the user can return some bottles.</li>
  </ul>
  
  <p>I want to be able to choose whatever type of bottle and corresponding count on the submit, but I believe I'm missing something because the behavior is all messed up : </p>
  
  <ul>
  <li>the Inputs of the 2 arrays are linked one-another,</li>
  <li>When I change some options in the select, sometimes the other selects are updated which is not what I want (obviously)...</li>
  </ul>
  
  <p>Here is a working example in a plunkr : <a href="http://plnkr.co/edit/1z6dN6?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/1z6dN6?p=preview</a></p>
  
  <hr>
  
  <p>Here is my <strong>html</strong> file (I'm using AngularMaterial 2) :</p>
  
  <pre><code>  &lt;div fxLayout="row" style="max-width: 80%"&gt;
  
      &lt;!-- ORDERED BOTTLES --&gt;
      &lt;div fxLayout="column" style="min-width: 50%"&gt;
        &lt;div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of orderedBottles; let i = index"&gt;
          &lt;md-select class="select" placeholder="Select bottle type" name="orderedTypeSelect_{{i}}" [(ngModel)]="orderedBottles[i].typeId"&gt;
            &lt;md-option class="options" *ngFor="let type of orderedClonedArrayBottles" [value]="type.typeId"&gt;
              {{ type.name }}
            &lt;/md-option&gt;
          &lt;/md-select&gt;
  
          &lt;md-input-container class="container"&gt;
            &lt;input md-input type="number" name="orderedBottleInput_{{i}}" autocomplete="off" [(ngModel)]="orderedBottles[i].count"
            step="1" min="0" max="99"&gt;
          &lt;/md-input-container&gt;
  
          &lt;button class="button-row" type="button" (click)="removeRow(i, 'order')"&gt;-&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- RETURNED BOTTLES --&gt;
      &lt;div fxLayout="column" style="min-width: 50%"&gt;
        &lt;div fxLayout="row" style="max-width: 100%" *ngFor="let bottle of returnedBottles; let j = index"&gt;
          &lt;md-select class="select" placeholder="Select bottle type" name="returnedTypeSelect_{{j}}" [(ngModel)]="returnedBottles[j].typeId"&gt;
            &lt;md-option class="options" *ngFor="let typed of returnedClonedArrayBottles" [value]="typed.typeId"&gt;
              {{ typed.name }}
            &lt;/md-option&gt;
          &lt;/md-select&gt;
  
          &lt;md-input-container class="container"&gt;
            &lt;input md-input type="number" name="returnedBottleInput_{{j}}" autocomplete="off" [(ngModel)]="returnedBottles[j].count"
            step="1" min="0" max="99"&gt;
          &lt;/md-input-container&gt;
  
          &lt;button class="button-row" type="button" (click)="removeRow(j, 'return')"&gt;-&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>To add some explanation, this is a child component that has a single Array of <code>Bottle</code> as <code>@Input()</code>, which I clone in 2 different arrays (<code>orderedClonedArrayBottles</code> and <code>returnedClonedArrayBottles</code>) so that my parent array isn't updated from the child updates.</p>
  
  <p>I then display my bottles with the <code>orderedBottles</code> Array and the <code>returnedBottles</code> that get their values from the 2 cloned beforehand.</p>
  
  <pre><code>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 &gt; 0) {
          this.orderedBottles.push(this.orderedClonedArrayBottles[0]);
        }
        if (this.returnedClonedArrayBottles.length &gt; 0) {
          this.returnedBottles.push(this.returnedClonedArrayBottles[0]);
        }
      }
    }
  </code></pre>
  
  <p>I have no idea why this isn't working correctly, most probably because I don't manage the <code>*ngFor</code> as I should. I have seen posts about <code>trackBy</code> for <code>*ngFor</code> but I have no idea if that will help or not.</p>