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

Issue

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?

Solution

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.

Answered By – Günter Zöchbauer

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.