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

Convert Angular 4 web app to Angular Universal app
Generate a routing module while creating a module in angular-cli
What is the best practice to manage sessions with Ionic 2
Angular 2 Updating Component After Form Submit With New Data From Response
How to configure and use Auth-0 in Angular4
How to get meta tags work correctly in angular 2? [closed]
Angular2-highcharts switching option
How to make ViewChild work in a unit test
Angular 2 AOT: Getting lot of errors in index.d.ts
Angular2 doesn't work Custom Reuse Strategy with Lazy module loading
view not updated while changing class variable value angular2
Using Angular 2, how can I allow robots.txt to be viewed without angular routing being triggered?
Angular2 Google sign
Angular2 : Async Pipe and conditional styling. How to refactor my code?
Angular 2 attribute directive to clear textbox?
How to get asynchronous data from one Angular component to another

Categories

HOME
docker
okta
drawing
raster
automation
refactoring
payment
statistics
umbraco7
etcd
ais
geogebra
raspberry-pi3
strongswan
amazon-sqs
ieee
apigee
executable-jar
filenet-p8
trackjs
jquery-gmap3
systemml
recurly
swtbot
postmates
cookie-session
uiinterfaceorientation
github-api
edi
u2
uppaal
openfiledialog
required
bluehost
lsmeans
get-eventlog
opensaml
webdrivermanager-java
r6
redhat-bpm
fancytree
oclazyload
cartography
yield
data-processing
autocorrect
api-manager
exports-loader
angular-chart
family-tree
spectral-density
proof-of-correctness
coupling
jsdoc3
wso2dss
topshelf
google-keep
mongodb-scala
ember-cli-mirage
simplehttpserver
gyp
google-chrome-arc
code-signing-entitlements
azure-webjobssdk
vibration
raptor
mechanize
kindle
audacity
jodconverter
android-selector
nibble
dfdl
pdf-extraction
youtube-javascript-api
cirqus
command-line-tool
nameerror
xcode-bots
xlet
moovweb
ekeventstore
lightroom
code-completion
coderunner
chap-links-library
arbitrary-precision
typescript1.4
pegjs
data-sharing
cxf-client
presentmodalviewcontrolle
topcoat
nsfontmanager
postfix-operator
mic-1
facebook-events
jquery-textext
ipad-2
converters
timezoneoffset
gwt-2.5
clang-complete
launching-application
background-music
winqual
rakefile
clean-language
incremental-linking
o3d

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