Angular 4 select initial value not selecting correctly when used with objects

Question

Here is a plunker:

 <select [(ngModel)]="selectedValue">
    <option 
      *ngFor="let item of items" 
      [attr.selected]="item.Id == selectedValue.Id ? '' : null" 
      [ngValue]="item" >
        {{item.Text}}
    </option>
  </select>

export class App {
      selectedValue: DataItem = {Id: 2, Text: 'two'};
      items: DataItem[] = [{Id: 1, Text: 'one'}, {Id: 2, Text: 'two'}, {Id: 3, Text: 'three'}]]; }

export class DataItem{
  Id: number;
  Text: string;
}

Tried many suggestions from various google and stackoverflow answers, but could not get it working. Anyone has a solution? I'm not interested in a solution which suggests NOT to use ngModel or handle change events.

[compareWith] works like a charm! Somehow did not find post you have referenced. Thank you very much. — Algis, Aug 16 '17 at 12:16

Arun Kumaresh · Answer 1 · 2017-08-16T10:11:32.640

Change [(ngModel)]="selectedValue" to [(ngModel)]="selectedValue.Id" and

[ngValue]="item" to [ngValue]="item.Id"

<select [(ngModel)]="selectedValue.Id">
    <option 
      *ngFor="let item of items" 
      [attr.selected]="item.Id == selectedValue.Id ? '' : null" 
      [ngValue]="item.Id" >
        {{item.Text}}
    </option>
  </select>

or try this

 <select  [(ngModel)]="selectedValue.Id">
    <option *ngFor="let item of items" [value]="item.Id">
            {{item.Text}}
    </option>
</select>

Angular 4 select initial value not selecting correctly when used with objects

1 Answers1