I have a list of user roles that I need to display in a dropdown menu:
export enum UserRoleType {
masterAdmin = 'ROLE_MASTER_ADMIN'
merchantAdmin = 'ROLE_MERCHANT_ADMIN'
resellerAdmin = 'ROLE_RESELLER_ADMIN'
}
export const AdminRoleType2LabelMapping = {
[UserRoleType.masterAdmin]: 'Master Admin'
};
export const MerchantRoleType2LabelMapping = {
[UserRoleType.merchantAdmin]: 'Merchant Admin'
};
export const ResellerRoleType2LabelMapping = {
[UserRoleType.resellerAdmin]: 'Reseller Admin'
};
// Assigning the mapping values and role types
public ResellerRoleType2LabelMapping = ResellerRoleType2LabelMapping;
public roleTypes = Object.values(UserRoleType).filter(value => typeof value === 'string');
To create the dropdown menu, I am using the following code snippet:
<select class="custom-select" formControlName="role">
<option [value]="roleType" *ngFor="let roleType of roleTypes">{{ ResellerRoleType2LabelMapping[roleType] }}</option>
<div class="help-block form-text with-errors form-control-feedback" *ngIf="controlHasErrors('role')">
{{controlValidateMessage('role')}}
</div>
</select>
I encountered an issue where blank lines were appearing in the dropdown menu. To address this, I attempted to use only the keys from the UserRoleType enum, but it resulted in more blank rows:
public roleTypes = Object.keys(UserRoleType).filter(value => typeof value === 'string');
Could you provide any insights on how I can fix this problem? My goal is to display the user roles without any empty lines in the dropdown menu.