Angular 2: Select dropdown not selecting option despite "selected" attribute

Question

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?

Answer 1

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"