Angular 4 - using objects for option values in a select list : <p>I know that similar questions have been asked, but I've found none with a good answer. I want to create a select list in an Angular form, where the value for each option is an object. Also, I do NOT want to use 2 way data binding. e.g. if my Component has these fields:</p>

<pre>

    lUsers: any[] = [
        { Name: 'Billy Williams', Gender: 'male' },
        { Name: 'Sally Ride', Gender: 'female'}
        ];
    curUser: any;

</pre>

<p>I would like my HTML template to contain this:</p>

<pre>

    &lt;select #selectElem (change)="setNewUser(selectElem.value)"&gt;
        &lt;option *ngFor="let user of lUsers" [ngValue]="user"&gt;
            {{user.Name}}
        &lt;/option&gt;
    &lt;/select&gt;

</pre>

<p>With this code, though, my setNewUser() function receives the contents of the selected user's Name field. Why it picks that specific field, I have no idea.  What I expect is that it would receive the "value" of the selected option, which I specifically set to a user object.</p>

<p>Note that I used ngValue instead of value in the option. That was by suggestion of others on SO. If I use value instead, what happens is that the object gets converted to the string '[Object object]', which is what setNewUser() receives, which is useless.</p>

<p>FYI, I'm working on Windows 10, using angular 4.0.0 with @angular/cli 1.1.2. Here is the setNewUser() method:</p>

<pre>

    setNewUser(user: User): void {

    console.log(user);
    this.curUser = user;
    } // setNewUser()

</pre>

<p>I am determining just what exactly is being passed to it both my logging it, and also including this on the template: <code>&lt;pre&gt;{{curUser}}&lt;/pre&gt;</code></p>
