Instead of displaying the name, HTML reveals the ID

I have defined a status enum with different values such as Draft, Publish, OnHold, and Completed.

export enum status {
    Draft = 1,
    Publish = 2,
    OnHold = 3,
    Completed = 4
}

In my TypeScript file, I set the courseStatus variable to have a default value of Draft from the status enum.

courseStatus: status = status.Draft;

When displaying the courseStatus in the HTML using a label element, it shows as an ID instead of the enum value.

<label [for]="'status'">{{courseStatus}}</label>

I attempted to create another variable to hold the string representation of the enum value, but it still displays as a number.

courseStatusValue: string = this.courseStatus.toString();

The issue arises when trying to convert an ID received from the API into the corresponding enum value.

Answer №1

To modify the enum values, update the assigned values as follows:

export enum status {
  Draft = 'Draft',
  Publish = 'Publish',
  OnHold = 'OnHold',
  Completed = 'Completed'
}

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

Is it possible to utilize [key:string]: any in order to eliminate the requirement for an additional function when working

Currently, I am utilizing recompose within my React project. Specifically, I am leveraging its compose function which is defined as: function compose<TInner, TOutter>( ...functions: Function[] ): ComponentEnhancer<TInner, TOutter>; interf ...

Tips for displaying a collection of items received from an asynchronous API request

I'm having a little trouble with an Angular (Javascript) issue. I am trying to retrieve a list of roles such as Admin, Viewer, and Guest from an API and display them on the user interface. Here are the things I've attempted: TS: ngOnInit() { ...

The element is implicitly assigned an 'any' type as the expression of type 'string' is unable to be used as an index within the type '{...}'

Trying to improve my react app with TypeScript, but encountering issues when typing certain variables. Here's the error message I'm facing: TypeScript error in /Users/SignUpFields.tsx(66,9): Element implicitly has an 'any' type becaus ...

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

How come my button is initiating automatically instead of manually?

Working on developing an API using Angular 2 with the Janus media server has brought up an issue regarding the start button. When running Janus, the button initiates automatically instead of manually. The following function was implemented for this purpos ...

Tips on updating the datepicker format to be dd/mm/yyyy in ngbdatepicker

I am currently using ng-bootstrap for a datepicker and need to change the date format from yyyy/mm/dd to dd/mm/yyyy. I have tried to make this adjustment but haven't had success. If anyone has suggestions on how to accomplish this, please help. Here ...

Angular Rxjs repeatWhen: when none of the statuses are COMPLETED

If the status in my Angular Service file is not 'COMPLETED' for all data, I need to retry hitting the same URL up to 5 times with a delay of 5 seconds. [ { "data": [ //SET OF OBJECTS ], "status": ...

Setting up the Angular 2 router to function from the /src subfolder

My goal is to create two separate subfolders within my project: src and dist. Here are the key elements of my application: root folder: C:\Server\htdocs\ app folder: C:\Server\htdocs\src index.html contains <base href="/ ...

The module for the class could not be identified during the ng build process when using the --

Encountering an error when running: ng build --prod However, ng build works without any issues. Despite searching for solutions on Stack Overflow, none of them resolved the problem. Error: ng build --prod Cannot determine the module for class X! ...

Tips for updating the date separator in Angular 2

When using the date pipe to format a date, I am struggling to change the date separator. My goal is to format the date as "27.07.2016". Despite trying the code below: {{dateValue | date:'dd.MM.yyyy'}} The output still displays the date as "27/0 ...

The typescript MenuProvider for react-native-popup-menu offers a range of IntrinsicAttributes

Looking to implement drop-down options within a Flatlist component, I've utilized the React Native Popup Menu and declared MenuProvider as the entry point in App.tsx. Encountering the following error: Error: Type '{ children: Element[]; }' ...

Ensuring Valid Numbers in Angular 2

Working with Angular 2 (2.0.0) and TypeScript to set validation rules within an <input> element in a table column. For instance, let's say we have a table and some input fields: <table> <tr> <td>Values: {{ dataFromSer ...

Type Vue does not contain the specified property

I am encountering an issue where I am using ref to retrieve a value, but I keep receiving the error message "Property 'value' does not exist on type 'Vue'". Below is the code snippet causing the problem: confirmPasswordRules: [ ...

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

Managing relationships within TypeORM's single table inheritance using a base class for targeting relations

In my application, I aim to provide users with notifications in the form of news items of various types. The relationship between User and NewsItem needs to be one-to-many, with NewsItem serving as a base class for different types of news items. Below is ...

Tips for addressing the issue of mat-list-item not occupying the entire row's space

Hello everyone, I am currently trying to render an article.component.html within my article-list-component.html in a list format. When I use plain HTML, it renders correctly as shown in picture 1: Title - author - Date Here is the code for my article-list. ...

What is the process of incorporating a custom data type with ngModel in Angular Dart?

In the process of developing an app using AngularDart, I have come across some interesting challenges. While I appreciate the ease with which forms can be handled in AngularDart, I am facing a hurdle when it comes to working with different data types. My ...

What could be the reason for typescript not issuing a warning regarding the return type in this specific function?

For instance, there is an onClick event handler attached to a <div> element. The handler function is supposed to return a value of type React.MouseEventHandler<HTMLDivElement> | undefined. Surprisingly, even if I return a boolean value of fal ...

What steps can be taken to address the InvalidPipeArgument error when working with dates?

When attempting to format a date in a specific way using the pipe date, I encountered an error: Uncaught Error: InvalidPipeArgument: 'Unable to convert "25/01/2019" into a date' for pipe 'e' at Xe (main.fc4242d58c261cf678ad.js:1) ...

Retrieve values from DynamoDB in their original Number or String formats directly

Here is the code I am using to retrieve data from DynamoDB. async fetchData(params: QueryParams) { return await this.docClient.send(new QueryCommand(params)); } const dbObject: QueryParams = { TableName: process.env.TABLE_NAME, KeyCo ...