Remove empty rows from the dropdown menu

Here is a sample list:

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'

};


public ResellerRoleType2LabelMapping = ResellerRoleType2LabelMapping;
  public roleTypes = Object.values(UserRoleType).filter(value => typeof value === 'string');

Let's create a dropdown menu:

<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 attempted to simplify the keys like this:

public roleTypes = Object.keys(UserRoleType).filter(value => typeof value === 'string');

However, I am encountering blank rows. Any idea on how to debug and resolve this issue?

Answer №1

 const roles = Object.keys(UserRoleType).filter(key => typeof UserRoleType[key] === 'string');

To see a working demonstration, you can visit this link. If you prefer the enum values in a dropdown menu, check out this demo. I noticed that in the dropdown menu, you are loading options for ResellerRoleType2LabelMapping[role], which will correspond to 1/3. Therefore, option 2 will be blank and one will have a value similar to this example. Is this the desired outcome?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the functionality of Angular 5 EventEmitter

I have been trying to call a function from the Parent Component in the Child Component, and here is how I implemented it: project-form.component.ts @Component({ selector: 'app-project-form', templateUrl: './project-form.component.html& ...

What is the best way to incorporate node modules into my tsconfig file?

I've taken some raw angular typescript components and packaged them into a private NPM module for sharing between various projects. Although I import these components like any other npm library, I encounter an error message when trying to serve my ap ...

Passing props to a component in React is not possible

I'm struggling to pass props to my child component from App.tsx and I can't seem to find a solution. Even after searching online for 2 hours, nothing seems to work. Does anyone know what the issue could be? The error message I'm getting is: ...

Troubleshooting why Angular2 is failing to load external styles in styleUrls

Currently in the process of developing an angular2 application and had envisioned being able to implement distinct styles for public content versus admin content. To my disappointment, it appears that Angular is not accommodating external styles that are l ...

Ways to differentiate between the sources of two cold Observables (not just the possible data streams they may produce)

Situation: Within my Angular application, I am using publishReplay to store and replay specific Http requests. However, I encountered an issue where I need the cached observable source to update itself and create a new cached observable with publishReplay ...

Traversing an array of objects to locate a specific key

I have an array of objects structured as follows: data = [ { "AccountType":"Client", "DeploymentList": { "-L3y8Kpl5rcvk-81q004": { "DeploymentKey":"-L3y8Kpl5rcvk-81q004", "DeploymentName":"Testing 3" ...

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

Let's imagine a scenario where our application includes a books page. We are utilizing the following technologies: Angular, NGRX, jest. To provide some context, here are a few lines of code: The interfaces for the state of the books page: export int ...

Steps for making a "confirm" button within a modal that includes a redirect URL

I have developed a modal that, upon clicking on the confirm button, should redirect the user to the page titled securities-in-portfolio. modal <div class="modal-footer justify-content-center"> <button type="button" class ...

The attribute 'pixiOverlay' is not found in the property

Working on my Angular 8 project, I needed to display several markers on a map, so I chose to utilize Leaflet. Since there were potentially thousands of markers involved, I opted for Leaflet.PixiOverlay to ensure smooth performance. After installing and imp ...

Error occurs when trying to open a modal popup within a component due to changes in expression

In my application, I am facing an issue where I have a parent component passing HTML content to a child common component using @ViewChild(). However, when the Child component loads up a popup, the console throws the following error: "ExpressionChangedAft ...

Uncover the selected user-filtered values in ag-Grid

When using ag-grid, I've implemented column filters on each column. These filters display a checkbox list of all distinct values found in that particular column when clicked by the user. Users can then select or deselect values from the list, and upo ...

Documentation in TypeScript with JSDoc and using the new Rest type syntax

Encountering an issue while integrating TypeScript into a large existing React/Redux application. To test things out, I decided to convert one of my React files to a .ts file. My approach involves using JSDoc to add types to the imported JS files in order ...

``What are the steps to identify and retrieve variables from an Angular HTML template by utilizing Abstract Syntax Trees

I am currently working on a project in Angular that utilizes HTML and Typescript. My goal is to extract all the variables from the HTML templates of each component. For example, let's say I have an HTML component like this: <div *ngIf="value ...

A guide on setting up custom themes in Vue.js with TypeScript

I've been trying to update the color scheme of a Vue template (using vuetify) that I'm working with, but after spending hours on the documentation, I'm at a loss for what to do next. Here is my main file: //src/main.ts import '@babel/ ...

What sets apart the browser's debugger from Angular's setTimeout function?

I'm currently working on an angular application that is embedded within a larger application that I do not have access to. I am using a router to navigate between pages after a pop-up modal has been acknowledged (checkbox & button). It's crucial ...

Express functions properly when handling the root route, but encounters issues with sub routes as it sends empty response bodies

Inside the routes.ts file: const router:Router = express.Router() // Route to get all blogs router.get('/',async (req:Request,res:Response)=>{ res.status(200).send("message sent") }) router.get('/admin',async (req:Requ ...

Utilizing conditional date parameter in Angular's in-memory web API for an HTTP request

In my current project, there is a collection of objects referred to as members members = [ {id:'1', firstName:'John', lastName:'Black', birthDate:'1956-11-22', gender:'Male', email:'<a href="/c ...

The horizontal overflow is malfunctioning, resulting in only a limited number of columns being visible on the screen

I am facing an issue with the CSS for my table. Despite using overflow-x: scroll, only half of the columns are being displayed on the screen out of the 15 total columns. Can anyone provide assistance with this problem? .table { font-family: Roboto,"He ...

The data stored in a FormGroup does not automatically transfer to FormData

I am currently facing an issue with uploading multi-part data to my API. To achieve this, I have created a FormData object for the upload process. Initially, I gather all the necessary user input data such as an image (file) and category (string). These va ...

Using TypeScript, effortlessly retrieve objects within React components based on their keys

I am looking for a way to dynamically choose a React component based on a key within an object import React, {useState, useEffect} from 'react' import ComponentA from '@components/ComponentA'; import ComponentB from '@components/Co ...