Search code examples
angularselectcheckboxbindingtwo-way

Angular two-way binding for select with object


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>

Solution

  • 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>