Angular two-way binding for select with object

Question

Actually, i'm trying to bind the array of object to select input. I'm trying in this way, [(ngModel)]="users[i].roles", where 'users' is outer array and 'roles' is another array inside users. Here, roles is array of key value pairs like,

roles = [{'code': 1, 'desc: ''},{'code': 2, 'desc: ''},{'code': 3, 'desc: ''}]

How can i bind the 'code' from this array.

My HTML code,

 <mat-select placeholder="User Roles" [(ngModel)]="users[i].roles" matTooltip="{{users[i].roles}}" multiple>
    <mat-option *ngFor="let role of userRoles" [value]="role.code">{{role.desc}}</mat-option>
 </mat-select>

Do you have *ngFor to loop through users? Could you provide code — Dmitriy Snitko
– Dmitriy Snitko, Commented Sep 12, 2018 at 5:50

Ganesh · Accepted Answer · 2018-09-14 04:36:32Z

2

try to use *ngFor inside a <div> element

<div *ngFor="let role of roles">
    <input type="number" [(ngModel)]="role.code">
</div>

for more details look here.. How properly bind an array with ngModel in angular 4?

edited Sep 14, 2018 at 4:36

answered Sep 12, 2018 at 5:24

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

1 Comment

Dmitriy Snitko Over a year ago

You have no need use index in template. [(ngModel)]="role.code"

SoroushNeshat · Accepted Answer · 2018-09-12 05:20:51Z

0

put it in an ngFor :

in .ts :

roles= [{'code': 1, 'desc: ''},{'code': 2, 'desc: ''},{'code': 3, 'desc: ''}]

in .html

<div *ngFor="let role of roles;let index=index">
    <input [(ngModel)]="roles[index].code">
</div>

answered Sep 12, 2018 at 5:20

SoroushNeshat

6745 silver badges11 bronze badges

Comments

Mangesh Daundkar · Accepted Answer · 2018-09-12 07:01:01Z

0

thanks for your help. I solved this problem by modifying code in this way...

for (let user of this.users) {
   user.userRoles = [];
   for(let role of user.roles)
   {
     user.userRoles.push(role.code);
   }
}

In html,

<mat-select placeholder="User Roles" [(ngModel)]="users[i].userRoles" matTooltip="{{users[i].userRoles}}" multiple>
    <mat-option *ngFor="let role of userRoles" [value]="role.code">{{role.desc}}</mat-option>
</mat-select>

answered Sep 12, 2018 at 7:01

Mangesh Daundkar

1,0811 gold badge16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular two-way binding for select with object

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related