Angular 2 set selected on a select option dropdown

Question

I have 2 objects of the type User:

• users has the full list of users.
• selectedUsers has the getUsersBySid that retur

Answer 1

As you posted in your question, selectedUsers has a list of users from db, you cannot use it this way as an object selectedUsers.id.

you can try with the below options, but first of all, you have to remove [selected]="selectedUsers.id === user.id" from your option element, since it has some conflicts with [(ngModel)].

Option1(the first dropdown in plunker): bind user(object) with [ngValue], then items of selectedUsers must keep the exact instance of items from users which means you have to compare selectedUsers with users and push those users with same value from the original users list.

Option2(the second dropdown in plunker): bind user.id with [ngValue] or [value], then you should set selectedUser to be an array of user.id.

OPtion3(the third dropdown in plunker): use compareWith which seems the easiest way.

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
  <option *ngFor="let country of countries" [ngValue]="country">
    {{country.name}}
  </option>
</select>

// define this function in your component
compareFn(c1: Country, c2: Country): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

refer the below plunker for all the above solutions.