How to detect changes in a list of drop down elements?
<p>I have a list of users. Each user is a composite object: <code>{ id: '123', name: 'Bob', State: 'Colorado' }</code></p>

<p>I render those users using an *ngFor:</p>

<pre><code>&lt;div *ngFor="let u in users"&gt;
    {{ u.name }}
    &lt;select [(ngModel)]="u.state"&gt;
       &lt;option *ngFor="let s in states" [value]="s"&gt;{{s}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>When select-value changes - I want to save the object over REST API.</p>

<p>I tried adding <code>(change)="changeState(u)"</code>, but that does not work, apparently <code>u.state</code> is being updated after my <code>(change)</code> callback is executed.</p>

<p>If I would not have a loop, I would give my dropdown a reference: <code>#state</code> and then use <code>(change)="changeState(u, state.value)"</code></p>

<p>Is my only option is to use <code>$event.target.value</code>? Or is there a slicker way to do this? This solution also takes away validation.</p>

<p>Is any of the first two solution attempts salvageable?</p>