CODEWITHSUNDEEP
javascriptangularjsangularangular2-template
Chinmoymohanty85
Chinmoymohanty85

Reputation: 127

two-way binding to select element in Angular 2 does not set selected element on first render

I have the below code I'm using for binding an object[] to a select list in Angular 2.0 (rc 1). The problem is that the initially when the select list in rendered, it does not pre-select the appropriate value/index.

In the below code example, "ma" is the actual class variable of the component. ma has a SelectedItemType property which is one of the objects from the myItemTypes object array. 

  <select class="form-control" [(ngModel)]="ma.SelectedItemType">
      <option *ngFor='let item of myItemTypes'
                                    [ngValue]='item'>{{item.Label}}
      </option>
  </select>

I've tried using the [selected] / [attr.selected] attribute, but it makes not difference. Some additional info : If instead of the Object, if I bind to the Type property (a string value) using the below code (it works fine):

<select class="form-control" [(ngModel)]="ma.SelectedItemType.Type">
          <option *ngFor='let item of myItemTypes'
                                        [value]='item.Type'>{{item.Label}}
          </option>
 </select>

But, I would really want to be able to have the Two-way data-binding with the Object. Can you see something I might be missing here?

Upvotes: 3

Views: 1303

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

ma.selectedItemType must refer to an item of myItemType. It has to point to the same instance, another instance even with the same content won't work.

Upvotes: 1

Related Questions