Angular 2 selected in the dropdown menu

Question

I have 2 objects of type User:

• users has a complete list of users.
• selectedUsers has getUsersBySid that returns a list of users from db

Therefore, I just want to note that the users specified by getUsersById : selectedUsers , and I tried this, but didn't work:

 <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 extracts users from the database:

  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 see that selectedUsers is changing, but the dropdown is not marked as 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 that way as a selectedUsers.id object.

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

Option1 (first drop-down list in the plunkers) : bind user (object) using [ngValue], then the selectedUsers elements must contain the exact instance of the elements from users , which means you must compare selectedUsers with users and click those users with the same value from the original list users .

Option2 (second drop-down list in the plunkers) : bind user.id with [ngValue] or [value], then you must set selectedUser as an array of user.id

OPTION3 (third dropdown in plunker) : use compareWith , which seems to be 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; } 

see below plunker for all of the above solutions.