4

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?

Bryan
  • 2,951
  • 11
  • 59
  • 101
  • 1
    try using `[attr.selected]` instead of `[selected]` – RomanHotsiy Nov 21 '16 at 23:03
  • 1
    This doesn't work either. It sets selected="true" on the one that should be selected and "selected="false" on all of the rest, but the item isn't actually selected. The dropdown label is blank so the user thinks nothing is selected. – Bryan Nov 22 '16 at 00:30

2 Answers2

5

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"

RomanHotsiy
  • 4,978
  • 1
  • 25
  • 36
  • 1
    While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – kayess Nov 22 '16 at 10:32
  • 1
    @kayess, yes, fully agree. Updated – RomanHotsiy Nov 22 '16 at 10:51
  • 4
    This add the "selected" attribute to the correct option, but the label for the dropdown still comes in blank when the page loads, so the user can't tell that anything is selected. Still have to manually select an option to get the label to show. – Bryan Nov 23 '16 at 17:40
4

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • What do you mean by this exactly? ngValue is passing the proper value to UnitOfMeasurementId when an item is selected. – Bryan Nov 23 '16 at 17:44
  • Sure, but if you want to define the initially selected item, then you need to set `UnitOfMesurementId` yourself. `ngModel` will then take care to make the right the selected one. – Günter Zöchbauer Nov 23 '16 at 17:45