angular


Angular 2: Select dropdown not selecting option despite “selected” attribute


I have the following code for a select dropdown:
<select id="UnitOfMeasurementId" name="UnitOfMeasurementId" [(ngModel)]="UnitOfMeasurementId">
<option *ngFor="let unit of UnitOfMeasurements" [ngValue]="unit.Value" [selected]="unit.Selected">{{unit.Text}}</option>
</select>
Each item in the UnitOfMeasurements array looks something like this:
Selected: false
Text: "lb"
Value: "1"
Or this:
Selected: true
Text: "kg"
Value: "3"
[(ngModel)]="UnitOfMeasurementId" contains the value of the item that should be selected. In this particular example, that value is 3, so the 3rd item should be selected. Sure enough, when I inspect the element it shows ng-reflect-selected="true" on the correct item, but nothing is actually selected. How can I get the correct item in the list to actually dynamically select instead of just adding the ng-reflect-selected="true" attribute?
attr.selected binding sets attribute value to the passed value. So if you pass false it will set selected="false" which is not what you want to get (as it makes element actually selected according to HTML spec). To remove attribute you have to pass null.
Use:
[attr.selected]="unit.Selected ? '' : null"
Don't use the selected attribute with ngModel and ngValue, but instead assign the value of the selected item to UnitOfMeasurementId.
It's important that it has the identical instance as the one used in *ngFor. Some other object instance with the same properties and same values won't work.
Until I get a better answer, I am using #RomanHotsiy's answer to get the selected attribute on the right option, then adding $('select option[selected]').prop('selected', true); to force it to actually be selected when the component loads.

Related Links

Angular2 SELECT OPTION after pipe executes
Angular2 - EXCEPTION: TypeError: Cannot read property 'screen' of undefined
Angular 2: onChanges() is not reflecting Object value changes
How to call ViewChild in runtime?
Angular2 not detecting change to object value
Getting values of looped template using angular2 forms
Breeze and Angular2
Angular 2 hide/show template
Angular 2 RC1 - Auto import all used components inside a base component
Add Lodash to VS2015 Angular2 Project
cannot find module errors after upgrading to angular-2.0.0-rc.4
Angular 2 don't dectect change on an Observable
Convert date in format accepted by restService
Reset forms in Angular2
Angular 2 - App Component Protect
GetSentry RavenJS not importing in webpack build

Categories

HOME
git
solr
reverse-geocoding
payment
analytics
attributes
houndify
google-cloud-kms
cordova-plugins
pstricks
chapel
amazon-cloudsearch
pivot-table
translate
geometry
ninja
angularjs-ng-route
photon
subplot
uidocumentinteraction
greedy
cdb
packet-capture
unimrcp
grunt-connect-proxy
jung
sequences
product-key
tridion
winrt-xaml
pi
james
dreamhost
html.dropdownlistfor
falcor
ranorex
rethinkdb-python
evosuite
silent-installer
subtitle
equation
topshelf
csla
fixed
jquery-tags-input
voxel
svg-edit
pubsubhubbub
webtorrent
devpartner
correspondence-analysis
lzma
markov-models
giflib
rodbc
gethostbyname
shapely
liquibase-hibernate
rgraph
mindbody
jedit
undefined-symbol
gcdasyncsocket
xmlpullparser
puphpet
microsoft.mshtml
compiler-options
opencv-features2d
ember-qunit
tokumx
deface
out
control-center
declarative-services
android-x86
bitmapimage
google-email-settings-api
contactscontract
android-3.0-honeycomb
tandem
amber-smalltalk
aspnet-regiis.exe
mathtype
readelf
camping
visual-studio-test-runner
osx-gatekeeper
xemacs
mbprogresshud
nspasteboard
flotr
soaplite
cgpoint
fibonacci-heap
raw-ethernet
google-instant-previews
smalldatetime
fql.multiquery
viewexpiredexception
rakefile
multiple-versions
installshield-2008
executequery
html-rendering
open-basedir
google-notebook
maintaining-code
flashlite

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App