Using enums in templates - The statement will constantly evaluate to 'true' because the categories of 'RequestStatus.Done' and 'RequestStatus.Rejected' do not intersect at all

My HTML code is in this format, and I want to check the value to display a different form based on certain conditions. I have set up the condition in my HTML like this:

requestStatus = RequestStatus;

<ng-container
    *ngIf="
      (model.lastStatus.requestStatus == requestStatus.Done ||
        model.lastStatus.requestStatus == requestStatus.Rejected)
      else ChangeStatus
    "
  >

The model.lastStatus.requestStatus value is of type number. Also, here are the Request Types defined:

   export enum RequestStatus {
    New = 1,
    Processing = 2,
    Accepted = 3,
    Rejected = 4,
    Done = 5
}

Everything runs smoothly without any errors when I run the project. However, when I try to build it, an error message pops up:

ERROR in src/app/pages/pages/e-money-deposit/components/emoney-deposit-detail/emoney-deposit-detail-request/emoney-deposit-detail-request.component.html(10,16): This condition will always return 'true' since the types 'RequestStatus.Done' and 'RequestStatus.Rejected' have no overlap.

What could be causing this issue?

javascriptangulartypescript

Answer №1

Enumerations are a compiled feature that do not integrate smoothly in templates.

Implement an expression on the TypeScript side of your component.

Within the component:

export class AnotherComponent {
  public checkRequestStatus() { 
    return (this.data.lastRequest.status == requestStatus.Completed ||
        this.data.lastRequest.status == requestStatus.Cancelled);
    }
}

In the template:

<ng-container 
    *ngIf=" checkRequestStatus() else UpdateStatus"
>

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

What is the best way to pass an array of objects to a component as a prop and then distribute individual objects within the array as props to nested components?

Below this post, I delve into my desired goals and what has almost worked in my endeavors In my application, I have both the <oo-upload> and <oo-uploads> components defined. Essentially, <oo-uploads> showcases a table of <oo-upload> ...

javascriptarraysvue.jsvue-component

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

Three.js brings life to reflections through dynamic rendering

Embarking on my coding journey with JavaScript and exploring Three.js I created an experiment using shaders and an environment map (http://jsfiddle.net/gnazoa/3hxrky6k/1/) Through a tutorial on the Three.js website, I discovered how to achieve reflection ...

javascriptthree.js

Is there a way to mimic disabled input fields?

Is there a way to simulate input being disabled without actually changing the value in the input field, but still have that value sent with POST using a form? <input class="dis" type="text" disabled="disabled" value="111"> <input class="no" type= ...

javascriptjqueryhtmlcss

Favicon not appearing on Jekyll website

This is my first time working with Jekyll. I'm currently working on localhost and trying to set a favicon for the website. I generated the image.ico and added the code provided to my head.html file. The image appears in my _site folder, but it's ...

javascriptjqueryhtmljekyllfavicon

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

javascriptphpjqueryhtmlajax

Experiencing issues with this.$refs returning undefined within a Nuxt project when attempting to retrieve the height of a div element

I am struggling with setting the same height for a div containing Component2 as another div (modelDiv) containing Component1. <template> <div> <div v-if="showMe"> <div ref="modelDiv"> <Comp ...

javascriptvue.jsnuxt.js

What is the best way to turn off the legends in chart.js?

I'm having trouble customizing a chart using chart.js because I can't seem to disable the legends within the canvas element. However, I still want to style the legends elsewhere on the page using generateLegend(). Can anyone provide assistance wi ...

javascriptjquerycharts

Issue: Missing provider for t specifically when running in production mode

I've been researching and found that missing modules or services could be the cause of this issue, but I have double-checked and everything seems to be in order. Here is the complete error message: vendor.96643eaf6ee79e7b894d.bundle.js:1 ERROR Error ...

angularnpm

What is the best way to sum up all the values per month from a JSON file in React and showcase it as a single month using ChartJs?

Apologies if I didn't explain my question clearly enough. As a junior developer, sometimes it's challenging to ask the right questions, and I'm sure we've all been there, right? The data in my JSON file is structured like this: [ { &qu ...

javascriptreactjsjsonchart.js

Updating the parent's data by modifying data in the child component in VueJS

When I use multiple components together for reusability, the main component performs an AJAX call to retrieve data. This data is then passed down through different components in a chain of events. <input-clone endpoint="/api/website/{{ $website->id ...

javascriptvue.js

Display a div element with Angular's ng-show directive

I am encountering difficulties with implementing ng-show and $pristine. Below is the code snippet (also available on CodePen): <blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine"&g ...

javascriptangularjsng-showangularjs-ng-show

Creating intricate filters using React's map functionality

QUESTION HAS BEEN UPDATED. I am currently working on implementing a filter for my map, allowing users to specify which options they want to view using multiple selection boxes. However, I am encountering an issue with the page that appears after the user ...

javascriptreactjs

Failure when running npm start command in Nest js

After setting up a fresh Nest js on a new EC2 machine, I encountered an error when trying to run it for the first time. The error message indicated that the npm install process failed abruptly without any visible error: ubuntu@ip-172-31-15-190:~/projects/m ...

javascriptnode.jsexpressnpmnestjs

Ordering elements of array [i] based on sorting criteria of [i][0] and [i][1]

Looking to organize an array consisting of sets or pairs based on the first number in each pair. Here is the code snippet: function randomMap(numOfHills){ for(var i=0; i<numOfHills; i++){ xRandomForHills = Math.floor((Math.random() * 2000) ...

javascriptarrayssorting

BlockUI - Uncaught error: The object does not contain the method 'blockUI'

Trying to implement the blockUI jQuery Plugin, I have added the necessary libraries in this way; <script src="http://malsup.com/jquery/block/jquery.blockUI.1.33.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery ...

javascriptjqueryjquery-blockui

Is there a faster way to create a typescript constructor that uses named parameters?

import { Model } from "../../../lib/db/Model"; export enum EUserRole { admin, teacher, user, } export class UserModel extends Model { name: string; phoneNo: number; role: EUserRole; createdAt: Date; constructor({ name, p ...

javascriptnode.jstypescript

Issue with maintaining session persistence in Angular 7 and Express

I am currently facing an issue with my Angular 7 app connecting to an Express API backend where the session doesn't seem to persist. Within Express, I have set up the following endpoint: router.get('/getsession', function(req, res) { c ...

angularexpressangular7

Implement a click event for the newly added item

I am struggling to attach a click event to an element that I dynamically added using jQuery. When the item is present in my HTML code, everything works as expected. Please refer to the code below for clarification: HTML <div id="addNew">Add new Ite ...

javascriptjqueryhtmlclickappend

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...

javascripthtml.netangularjsroutes