I have received 2 sets of data from my API:
{
"content": [{
"id": 1,
"roleName": "admin",
},
{
"id": 2,
"roleName": "user",
},
{
"id": 3,
"roleName": "other",
}
],
"last": true,
"totalElements": 3,
"totalPages": 1,
"size": 20,
"number": 0,
"first": true,
"sort": null,
"numberOfElements": 3
}
and also user information:
{
"id": 1,
"userName": "admin"
userRole[
"id": 1,
"roleName": "admin",
]
}
In my HTML, I am trying to display the list of roles:
<div class="form-group">
<label>Roles</label>
<select formControlName="roles" class="form-control" id="roles">
<option>{{user.userRole.roleName}}</option>
<option *ngFor="let ls of roles">{{ls.roleName}}</option>
</select>
</div>
However, the UI is showing: [admin],[admin],[user],[other]
I attempted to eliminate duplicate roles using *ngIf:
<div class="form-group">
<label>Roles</label>
<select formControlName="roles" class="form-control" id="roles">
<option>{{user.userRole.roleName}}</option>
<option *ngFor="let ls of roles">
<div *ngIf="user.userRole.roleName!=ls.roleName">{{ls.roleName}}</div>
</option>
</select>
</div>
Unfortunately, the UI now displays:[admin],[blank],[user],[other]
I would appreciate any advice on how to correctly display the list of roles.