title: Angular 4 - using objects for option values in a select list
body: <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>