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 returns a list of users from db

So I just want to mark as selected the users given by the getUsersById: selectedUsers and i tried this but its not working:

<select multiple materialize="material_select" [materializeSelectOptions]="selectedUsers" [(ngModel)]="selectedUsers" name="users"> 
    <option value="" disabled selected>Usuarios</option>
    <option *ngFor="let user of users" [ngValue]="users" [selected]="selectedUsers.id === user.id">{{ user.name }} ({{ user.email }}) </option>
</select>

Function that retrieves the users from DB:

 getUsersBySid(){
        this.surveyService.getUsersBySid(this.selectedSurvey)
            .subscribe(
                users => {
                    this.selectedUsers = users;
                    console.log(this.users);
                    console.log(this.selectedUsers);
                }, 
                error => {
                    this.alertService.error("error cargar usuarios");
                }
            );
    }

Console.log():

users(3 user objects):

(3) [Object, Object, Object]
0:Object
id:"1"
name:"administrador"
pass:"21232f297a57a5a743894a0e4a801fc3"
__proto__:Object
1:Object
2:Object
length:3
__proto__:Array(0)

selectedUsers(1 user Object):

(1) [Object]
0:Object
id:"1"
name:"administrador"
pass:"21232f297a57a5a743894a0e4a801fc3"
__proto__:Object
length:1
__proto__:Array(0)

edit 2: If i print both objects i can see that selectedUsers is changing but the dropdown is not marking as selected the selectedUsers

<select multiple materialize="material_select" [materializeSelectOptions]="selectedUsers" [(ngModel)]="selectedUsers" name="selectedUsers"> 
    <option value="" disabled selected>Usuarios</option>
    <option *ngFor="let user of users" [ngValue]="user">{{ user.name }} ({{ user.email }}) </option>
</select>
Selected: {{selectedUsers}}<br/>
Users: {{users}}

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.