Select list set selected item angular 2 ngModel

Question

This is my current code:

<select name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option> </select> 

I load all the roles in the array, and the user class has the Role attribute (which is not loaded as user.role = roles[0] , but only through the backend data).

The problem is that the selected attribute does not work, and my choice does not fit the correct role. What am I doing wrong?

Answer 1

Just uninstall

 [attr.selected]="role == user.role ? 'true' : 'false'" 

and assign the selected role to user.role , and ngModel will make the corresponding element selected.

If the role object is an object, the assigned instance must be identical.

See also the recently added custom comparison. Https://github.com/angular/angular/issues/13268 is available from version 4.0.0-beta.7

 <select [compareWith]="compareFn" ... 

 compareFn(val1, val2): boolean { return val1 && val2 ? val1.id === val2.id : val1 === val2; } 

Answer 2

You do not need to use [attr.selected] . [(ngModel)]="user.role" is a two-way data binding, it will select a consistent option from your list if the value is user.role . And you can also use the base [value]

 <select name="role" [(ngModel)]="user.role"> <option *ngFor="let role of roles" [value]="role">{{role.name}}</option> </select> 

Answer 3

 <select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2"> <option [value]="i" *ngFor="let i of devices">{{i}}</option> </select> onChange(newValue) { console.log(newValue); this.selectedDevice = newValue;\ }