Wsrtjtyk

In a select tag, I need two-way binding, but is not working.

<select [(ngModel)]="selectedCountry">

    <option *ngFor="let country of countries" [ngValue]="country">

        {{country.name}}

    </option>

</select>

• 
  selectedCountry is a Country instance: selectedCountry.id = 3
  


• 
  countries is a Country instance List: country1.id = 1, country3.id = 3, country3.id = 3
  

selectedCountry and country3 have equal values but they aren't the same instance. Then country3 option is not selected.

I have overwritten the equality (==) operator and hashCode for the Country class, but it still does not work.

What's the problem? Is there something similar to the angular compareWith directive?

<select [compareWith]="equals"  [(ngModel)]="selectedCountry">

   <option *ngFor="let country of countries" [ngValue]="country">

      {{country.name}}

   </option>

</select>

equals(o1: Country, o2: Country) {

   return o1.id === o2.id;

}

Is there something similar to the angular compareWith directive?

You can use trackBy https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby

Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;

<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">

  <option *ngFor="let country of countries" [ngValue]="country">

    {{country.name}}

  </option>

</select>

I found the problem:

The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.

I opened a github issue:
https://github.com/dart-lang/angular/issues/1659

Meanwhile, I'm not using two-way binding complex object:

<select [(ngModel)]="selectedCountryId">

    <option *ngFor="let country of countries" [ngValue]="country.id">

        {{country.name}}

    </option>

</select>