Angular 2 dynamic create select and set selected option (edit operation)
<p>im trying to edit user. That user have non primitive array of machines. On edit i want to create new elements with select option and set that select option to value from user object:</p>

<pre><code>export class User{
    constructor(
        private id: number,
        private name: string,
        private machines: Machine[]
    ){}
}

export class Machine{
    constructor(
        private id: number,
        private name: string,
        private price: string
    ){}
}
</code></pre>

<p>got json:</p>

<pre><code>users =[  
        {  
            "id":1,
            "name":"Mike",
            "machines":[  
                {  
                    "id":1,
                    "name":"bike",
                    "price":"10"
                },
                {  
                    "id":2,
                    "name":"boat",
                    "price":"100"
                }
            ]
        }
    ]
machines =[  
        {  
            "id":1,
            "name":"bike",
            "price":"10"
        },
        {  
            "id":2,
            "name":"boat",
            "price":"100"
        },
        {  
            "id":3,
            "name":"car",
            "price":"50"
        }
    ]
</code></pre>

<p>On edit i want to set select value to the corresponding object of machine from user.</p>

<pre><code>&lt;div *ngFor="let machine of user.machines;  let i = index"&gt;
    &lt;label&gt;Pick machine&lt;/label&gt;
    &lt;div&gt;
        &lt;select name="machine" [(ngModel)]="user.machines[i]"&gt;
            &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Problem is in this:</p>

<p><a href="https://i.stack.imgur.com/DnJX9.png" rel="nofollow"><img src="https://i.stack.imgur.com/DnJX9.png" alt="enter image description here"></a></p>

<p>The both select options are setted to the last one.</p>

<p><strong>UPDATE (Solution):</strong></p>

<p>Forgot to mention, that div is inside <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">Template-Driven form</a>.</p>

<pre><code>&lt;form #f="ngForm" *ngIf="user" (submit)="updateUser(f.valid)" novalidate&gt;
    &lt;div *ngFor="let machine of user.machines;  let i = index"&gt;
        &lt;label&gt;Pick machine&lt;/label&gt;
        &lt;div&gt;
            &lt;select name="machine" [(ngModel)]="user.machines[i]"&gt;
                &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>If in form the name of element is actually submitted.</p>

<blockquote>
  <p>Each input element has a name property that is required by Angular
  Forms to register the control with the form.</p>
</blockquote>

<p>By adding unique name i solved my problem:</p>

<pre><code>&lt;select name="machine_{{i}}" [(ngModel)]="user.machines[i]"&gt;
                &lt;option *ngFor='let mach of machines' [ngValue]='mach' &gt;{{mach.name}}&lt;/option&gt;
</code></pre>