{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/4843","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/4843/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/4843/comments","events_url":"https://api.github.com/repos/angular/angular/issues/4843/events","html_url":"https://github.com/angular/angular/issues/4843","id":112487853,"number":4843,"title":"How to use select/option/NgFor on an array of objects?","user":{"login":"LMFinney","id":6683747,"avatar_url":"https://avatars.githubusercontent.com/u/6683747?v=3","gravatar_id":"","url":"https://api.github.com/users/LMFinney","html_url":"https://github.com/LMFinney","followers_url":"https://api.github.com/users/LMFinney/followers","following_url":"https://api.github.com/users/LMFinney/following{/other_user}","gists_url":"https://api.github.com/users/LMFinney/gists{/gist_id}","starred_url":"https://api.github.com/users/LMFinney/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/LMFinney/subscriptions","organizations_url":"https://api.github.com/users/LMFinney/orgs","repos_url":"https://api.github.com/users/LMFinney/repos","events_url":"https://api.github.com/users/LMFinney/events{/privacy}","received_events_url":"https://api.github.com/users/LMFinney/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/angular/labels/comp:%20core/forms","name":"comp: core/forms","color":"c7def8"},{"url":"https://api.github.com/repos/angular/angular/labels/effort2:%20medium%20(day)","name":"effort2: medium (day)","color":"bfe5bf"},{"url":"https://api.github.com/repos/angular/angular/labels/P2:%20required","name":"P2: required","color":"fad8c7"},{"url":"https://api.github.com/repos/angular/angular/labels/type:%20feature","name":"type: feature","color":"EEEEEE"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":20,"created_at":"2015-10-21T00:33:55Z","updated_at":"2016-03-14T11:22:08Z","closed_at":null,"body":"I'm having trouble creating a select in Angular2 that is backed by an array of Objects instead of strings. I knew how to do it in AngularJS using ngOptions, but it doesn't seem to work in Angular2 (I'm using alpha 42).\r\n\r\nIn the sample below, I have five selects, but only three of them work.\r\n\r\n1. 'Select String' is a simple string-based select, and it works fine.\r\n2. 'Select Object via 2-way binding' was my attempt to use 2-way binding. Unfortunately, it fails in two ways - when the page loads, the select shows the wrong value (foo instead of bar), and when I select an option in the list, the value '[object Object]' gets sent to the backing store instead of the correct value.\r\n3. 'Select Object via event' was my attempt to get the selected value from $event. It fails in two ways, too - the initial load is incorrect in the same way as (2), and when I selection an option in the list, the value '[object Object]' is retrieved from the event, so I can't get the right value. The select gets cleared.\r\n4. 'Select Object via string' is an approach that uses an object that works. Unfortunately, it really works by using the string array from (1) and converting the value from string to object and back.\r\n5. 'Select Object via JSON' might be a bit better than (4) because it doesn't require the string array, but it does involve using JSON each way. Also, I'm not sure if getting the Event from (change) is better or worse than getting the stringified objected from (ng-model-change). (@Chocoloper helped me with this version)\r\n\r\n```typescript\r\nimport {Component, FORM_DIRECTIVES, NgFor, Inject} from 'angular2/angular2';\r\nimport {RouteParams} from 'angular2/router';\r\n\r\ninterface TestObject {\r\n  name:string;\r\n  value:number;\r\n}\r\n\r\n@Component({\r\n  selector: 'app',\r\n  template: `<h4>Select String</h4>\r\n            <select [(ng-model)]=\"strValue\">\r\n                <option *ng-for=\"#o of strArray\" [value]=\"o\">{{o}}</option>\r\n            </select>\r\n\r\n            <h4>Select Object via 2-way binding</h4>\r\n            <select [(ng-model)]=\"objValue1\">\r\n                <option *ng-for=\"#o of objArray\" [value]=\"o\">{{o.name}}</option>\r\n            </select>\r\n\r\n            <h4>Select Object via event</h4>\r\n            <select [ng-model]=\"objValue2\" (change)=\"updateObjValue2($event)\">\r\n                <option *ng-for=\"#o of objArray\" [value]=\"o\">{{o.name}}</option>\r\n            </select>\r\n\r\n            <h4>Select Object via string</h4>\r\n            <select [ng-model]=\"objValue3.name\" (change)=\"updateObjValue3($event)\">\r\n                <option *ng-for=\"#o of strArray\" [value]=\"o\">{{o}}</option>\r\n            </select>\r\n\r\n            <h4>Select Object via JSON</h4>\r\n            <select [ng-model]=\"stringify(objValue4)\" (ng-model-change)=\"updateObjValue4($event)\">\r\n                <option *ng-for=\"#o of objArray\" [value]=\"stringify(o)\">{{o.name}}</option>\r\n            </select>\r\n\r\n            <div><button (click)=\"printValues()\">Print Values</button></div>`,\r\n  directives: [FORM_DIRECTIVES, NgFor]\r\n})\r\nexport class AppComponent {\r\n  objArray:TestObject[] = [{name: 'foo', value: 1}, {name: 'bar', value: 1}];\r\n  objValue1:TestObject = this.objArray[1];\r\n  objValue2:TestObject = this.objArray[1];\r\n  objValue3:TestObject = this.objArray[1];\r\n  objValue4:TestObject = this.objArray[1];\r\n\r\n  strArray:string[] = this.objArray.map((obj:TestObject) => obj.name);\r\n  strValue:string = this.strArray[1];\r\n\r\n  stringify(o:any):string {\r\n    return JSON.stringify(o);\r\n  }\r\n\r\n  updateObjValue2(event:Event):void {\r\n    const value:string = (<HTMLSelectElement>event.srcElement).value;\r\n\r\n    this.objValue2 = this.objArray.find((obj:TestObject) => obj.name === value);\r\n  }\r\n\r\n  updateObjValue3(event:Event):void {\r\n    const value:string = (<HTMLSelectElement>event.srcElement).value;\r\n\r\n    this.objValue3 = this.objArray.find((obj:TestObject) => obj.name === value);\r\n  }\r\n\r\n  updateObjValue4(event:string):void {\r\n    this.objValue4 = JSON.parse(event);\r\n    // if there were functions on TestObject, JSON.parse wouldn't be enough; we'd need this:\r\n    //this.objValue4 = this.objArray.find((obj:TestObject) => obj.name === JSON.parse(event).name);\r\n  }\r\n\r\n  printValues():void {\r\n    console.log('strValue', this.strValue);\r\n    console.log('objValue1', this.objValue1);\r\n    console.log('objValue2', this.objValue2);\r\n    console.log('objValue3', this.objValue3);\r\n    console.log('objValue4', this.objValue4);\r\n  }\r\n}\r\n```\r\n\r\nI can do (4) or (5) if that's the intended way, but they seem pretty clunky. Is there another approach? Am I just too early in the alpha? Did I do something silly?"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/196265793","html_url":"https://github.com/angular/angular/issues/4843#issuecomment-196265793","issue_url":"https://api.github.com/repos/angular/angular/issues/4843","id":196265793,"user":{"login":"ObaidUrRehman","id":1729964,"avatar_url":"https://avatars.githubusercontent.com/u/1729964?v=3","gravatar_id":"","url":"https://api.github.com/users/ObaidUrRehman","html_url":"https://github.com/ObaidUrRehman","followers_url":"https://api.github.com/users/ObaidUrRehman/followers","following_url":"https://api.github.com/users/ObaidUrRehman/following{/other_user}","gists_url":"https://api.github.com/users/ObaidUrRehman/gists{/gist_id}","starred_url":"https://api.github.com/users/ObaidUrRehman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ObaidUrRehman/subscriptions","organizations_url":"https://api.github.com/users/ObaidUrRehman/orgs","repos_url":"https://api.github.com/users/ObaidUrRehman/repos","events_url":"https://api.github.com/users/ObaidUrRehman/events{/privacy}","received_events_url":"https://api.github.com/users/ObaidUrRehman/received_events","type":"User","site_admin":false},"created_at":"2016-03-14T11:22:08Z","updated_at":"2016-03-14T11:22:08Z","body":"Any updates on when this is going to get fixed?"}}