Issue with Angular2 discount calculation formula malfunctioning

I'm encountering a rather perplexing issue with Angular2/Typescript.

My goal is to compute the final price based on a specified discount value. Here's the formula I am using:

row.priceList = row.pricePurchase + (row.pricePurchase * row.markUp / 100);

All the variables are declared as numbers.

When I attempt to execute the formula and display the values, inputting pricePurchase as 1 and markUp as 0, the outcome is 10?

How can this be happening and what steps should I take to correct it?

Appreciate your assistance.

Answer №1

If you want to experiment, you could attempt using the Number function like so:

const purchase = Number(row.pricePurchase);
row.priceList =  purchase + (purchase * Number(row.markUp) / 100);

Alternatively, you can use the shortcut you already mentioned that involves using the + operator:

const purchase = +row.pricePurchase;
row.priceList =  purchase + (purchase * +row.markUp / 100);

Answer №2

The issue was resolved by modifying the formula to:

+row.pricePurchase + ((+row.pricePurchase * +row.markUp) / 100);

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

There are no functions or classes returned when using NPM Link with the module

Welcome. Whenever I run npm link ../folder/ToFolder, it works as expected. However, when I attempt to import any function, nothing is returned. A clearer explanation I have tried importing a module that I created from another folder using npm link. When ...

Whenever I attempt to launch the application on my device, an error message stating "plugin_Not_Installed Exception" occurs

I encountered a plugin_Not_Installed Exception when running the app on my device. Here are the details of my Ionic setup: Ionic: Ionic CLI : 5.4.16 Ionic Framework : @ionic/angular 6.2.2 @angular-devkit/build-angular : 1 ...

Exploring Angular2 utilizing matrix-style URL notation

Which is the preferred method for creating URLs with parameters - using matrix url notation or the traditional ? and & format? I found the explanation in the angular.io documentation confusing. localhost:3000/heroes;id=15;foo=foo or localhost:3000/h ...

How can Angular be used to create core styles in a CSS file rather than adding them dynamically within style tags?

Whenever I import a component, like MatTabsModule, it automatically generates styles within the head section: <style>.mdc-tab{min-width:90px;padding-right:24px....</style> I'd prefer to have all these styles generated in an external CSS f ...

The global and centered positioning in @angular/cdk/overlay is not functioning as expected

I am currently experimenting with the new @angular/cdk library, but I am having trouble getting the position strategy to work. I simply want to display a modal that is centered on the screen with a backdrop. I know I can apply a class to the pane and use f ...

Having trouble deserializing the POJO that was sent from an Angular HTTP post request within my Spring Boot POST-mapped function

My application is a coffee shop, and I am trying to send an array of items to my Spring Boot backend. However, Jackson is throwing an exception: Cannot construct instance of `me.andrewq.coffeeshop.menu_items.Menu` (no Creators, like default constructor, e ...

Property referencing for change detection is a valuable technique

I'm struggling to update my template when changing a boolean property that is referenced in another array property. I expected the changes to reflect in my template, but they are not showing up. Upon initial load, everything appears in its initial st ...

Does Nativescript successfully utilize AOT Compilation even with the `Compiler` package still included?

I'm running this command: npm run ns-bundle --android --build-app --uglify The command is successful (you can find the complete log here). After navigating to the report folder (generated by webpack-bundle-size-analyzer), I found these two files: ...

Changing the order of a list in TypeScript according to a property called 'rank'

I am currently working on a function to rearrange a list based on their rank property. Let's consider the following example: (my object also contains other properties) var array=[ {id:1,rank:2}, {id:18,rank:1}, {id:53,rank:3}, {id:3,rank:5}, {id:19,r ...

Does this fall under the category of accepted practices for employing an effect in Angular?

I am working on integrating an Angular directive with a signal that receives values from a store selector. This signal is crucial for determining whether a button should be disabled or not. I'm curious about the best approach to listen to this signal ...

How to toggle visibility of multiple div elements in ReactJS

When working in react-js, I encountered a situation where two div elements and two buttons were used. Clicking the first button displayed the first div and hid the second div. Conversely, clicking the second button showed the second div and hid the first d ...

Leverage the nativeElement property within two separate components

Encountering an error in the autocomplete feature for Angular Maps (AGM), which reads: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of ...

Trouble with Angular 4: One-time binding directive not functioning properly

I am currently working on incorporating a directive for one-time binding in order to ensure that when I use this directive, the one-time binding feature is enabled. For reference, here is an example I created: https://stackblitz.com/edit/angular-bhayzy W ...

Should a MEAN stack app require the use of two servers in order to run?

Currently, I am in the process of developing a MEAN stack application which involves using MongoDB, ExpressJs, Angular 6, and NodeJs. One issue I am facing is determining whether two servers will be necessary to run the app simultaneously. Specifically, o ...

Set the subscription's value to the class property without changing its original state

Lately, I have been using the following method to set the value of a subscription to a property in my classes: export class ExampleComponent implements OnInit { exampleId: string; constructor(public route: ActivatedRoute) { this.route.params.subs ...

The cdkDragMoved event now provides the pointerPosition using the clientX and clientY coordinates rather than the container

I'm currently working on retrieving the x and y coordinates of a box based on its position within the container. Here's an example that I found on https://material.angular.io. To see how the cdkDragMoved event works, you can check out my small d ...

Transforming an Observable to a boolean using RXJS

Hey there, I'm currently working on creating a function similar to this: verify(){ return this.http.post(environment.api+'recaptcha/verify',{ token : this.token }).pipe(map(res=>res.json())); } I want to be able to use ...

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

Angular2 poses a strange problem with ngClass

It seems like Angular is expecting me to use single quotes for the class names even if there are no hyphens in my CSS class name. I've tried everything but Angular keeps insisting on using hyphens for this specific CSS class... it's strange, or m ...

Developing a feature in Angular 4 where shared components generate new instances with each reload

My dashboard template is based on Core UI, but I have made some modifications to better suit my app. The template consists of modules, with the sidebar menu playing a crucial role in navigation. However, as my app is larger, I utilize the top menu for navi ...