CODEWITHSUNDEEP
htmlangularjstypescript
Mr.DevEng
Mr.DevEng

Reputation: 2421

Values not displaying in Angular select box while binding Ngmodel

I am a beginner in Angular and when I tried to display object by looping in select box, it not displaying any values. Only showing blank dropdown.

My html page like the following:

<div *ngIf="userPermissionObj">
 <select id="permission">
   <option *ngFor="let obj of permissionType"
    [value]='permissionType.value' 
    [selected]="userPermissionObj.sPermissionType == obj.value ? true : null">
    {{permissionType.viewValue}}
   </option>
 </select>  
</div>

My component ts file contains like the following code,

getUserPermisionsByUsernameSearch()
{
  var param:string=this.permissionRequestUser;
    this.manageuserService.getUserPermissionApiMethod(param)
      .subscribe((data:any)=> {this.userPermissionObj=data;});
}

permissionType = [
{value: 'R', viewValue: 'Read'},
{value: 'W', viewValue: 'Write'}
];

Where have I wrongly implemented my html page?

Upvotes: 0

Views: 1370

Answers (3)

alekhya VV
alekhya VV

Reputation: 15

Instead of {{permissionType.viewValue}}, use{{obj.viewValue}}.

The iteration *ngFor="let obj of permissionType" where you chose obj as a variable. So you will have to use the same variable for the value interpolation.

Upvotes: 0

Mahamat GUIHINI
Mahamat GUIHINI

Reputation: 141

You should replace [value]='permissionType.value' by [value]='obj.value' and {{permissionType.viewValue}} by {{obj.viewValue}} because permissionType is the array you are looping with. So you're HTML should look like this

<div *ngIf="userPermissionObj">
  <select id="permission">
   <option *ngFor="let obj of permissionType"
     [value]='obj.value' 
     [selected]="userPermissionObj.sPermissionType == obj.value ? true : null">
     {{obj.viewValue}}
  </option>
 </select>  
</div>

Upvotes: 1

Edoardo Pacciani
Edoardo Pacciani

Reputation: 209

For a correct data binding you have to add an ngModel to the select and remove the selected attribute of the option.

<div *ngIf="userPermissionObj">
 <select id="permission" [(ngModel)]="userPermissionObj.permissionType">
   <option *ngFor="let permission of permissionType"
    [value]="permission.value">
       {{permission.viewValue}}
   </option>
 </select>  
</div>

in you ts

getUserPermisionsByUsernameSearch(): void
{
  const param:string=this.permissionRequestUser;
   this.manageuserService.getUserPermissionApiMethod(param)
      .subscribe((data:any)=> {
           this.userPermissionObj = data;
   });
}

permissionType = [
{value: 'R', viewValue: 'Read'},
{value: 'W', viewValue: 'Write'}
];

Upvotes: 0

Related Questions