I have the following code
<select name="role" [(ngModel)]="user.role">
<option *ngFor="let r of roles" [ngValue]="r">{{r.name}}</option>
</select>
where roles is an Object:
[{"id":1, "name":"user"}, {"id": 2, "name":"admin"}]
and user.role is for example:
{"id":1, "name":"user"}
I want initial value to be the user.role, I've tried a lot of things like ngInit, but it didn't get the job done.
You can try with this solution.
I have create a demo on Stackblitz
use [compareWith]="compareObjects" for use object in select
component.html
<select name="role" [compareWith]="compareObjects" [(ngModel)]="user.role">
<option *ngFor="let r of roles" [ngValue]="r">{{r.name}}</option>
</select>
component.ts
user = {
role: { "id": 1, "name": "user" }
}
roles = [
{ "id": 1, "name": "user" },
{ "id": 2, "name": "admin" }
]
compareObjects(o1: any, o2: any): boolean {
return o1.id === o2.id && o1.name === o2.name;
}
