How to use angular select with objects

Question

I'm getting roles from rest-api in my component like:

this.userService.getRoles().subscribe(data => this.roles = data);

Then I'm trying to use it in my template as below:

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

But it's not working, output for {{roles | json}}, so everything is fine with them, the problem is select doesn't work.

[{"id":1, "name":"user"}, {"id":2, "name":"admin"}]

define the user object on your component user = { role: 'user'} — Sachila Ranawaka
– Sachila Ranawaka, Commented Aug 8, 2018 at 10:46
@SachilaRanawaka user is defined as well, output for {{user | json}} is { "id": 1, "login": "admin", "password": "admin", "email": "[email protected]", "firstName": "Admin", "lastName": "Johnson", "birthday": "1995-06-06", "role": { "id": 2, "name": "admin" } } — 20 fps
– 20 fps, Commented Aug 8, 2018 at 10:48
@SachilaRanawaka it doesn't work even without ngModel directive, I've tried everything. Is anything need to be imported for using angular select? — 20 fps
– 20 fps, Commented Aug 8, 2018 at 10:49

user4676340 · Accepted Answer · 2018-08-08 10:51:49Z

2

Use [compareWith]. Stackblitz

@Component({
  selector: 'hello',
  template: `
    <select [(ngModel)]="selected" [compareWith]="compare">
      <option *ngFor="let role of roles" [ngValue]="role">{{ role.desc }}</option>
    </select><br>
    <p>Selected role : {{ selected | json }}</p>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {

  roles = [
    {id: 1, desc: 'Admin' },
    {id: 2, desc: 'User' },
  ];

  selected: any;

  compare(obj1, obj2) {
    return obj1 && obj2 && obj1.id === obj2.id;
  }
}

answered Aug 8, 2018 at 10:51

user4676340

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use angular select with objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related