Values not displaying in Angular select box while binding Ngmodel - html

Question

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?

Answer 1

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>

Answer 2

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'}
];

Answer 3

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.