Error TS2540: Assignment to variable 'i' is not allowed as it is declared as constant or read-only property

My terminal is displaying 3 errors:

  1. Error TS2540: Unable to assign to 'i' because it is a constant or read-only property.
  2. Error TS2540: Unable to assign to 'result' because it is a constant or read-only property.
  3. Error TS2322: Type '0' cannot be assigned to type 'void'.

component.ts

total: any;
totalPrice(): void {
      const result = 0;
      for (
        const i = 0; i < this.datas.length; i++
      ) { const data = this.datas[i];
        result = result + data.total;
      }
      return result;
    }

component.html

<td>{{ data.name }}</td>
    <td>{{ data.price }}</td>
    <td>{{ data.quantity }}</td>
    <td>{{ data.total }}</td>

{{ totalPrice() }}

I am currently using *ngFor to iterate through a list, and the purpose of the function totalPrice() is to calculate the sum of all the data totals.

Answer №1

The use of the `const` keyword makes a variable read-only. To make it mutable, consider changing `const` to `let`, removing `: void`, or updating it to `: number`

total: any;
totalPrice() {
      let result = 0;
      for (let i = 0; i < this.datas.length; i++) {
        let data = this.datas[i];
        result = result + data.total;
      }
      return result;
    }

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

Leveraging Angular 2 and RxJs 5 beta observables to continuously stream data from a while loop

I am looking to develop a straightforward Angular 2 application that calculates prime numbers within a while loop and continuously updates the view with newly discovered values. My goal is to showcase the list of prime numbers using *ngFor in real-time, gi ...

Error thrown by FAIconLibrary addIcon method has commenced

I recently created an FAIcon Module and utilized the FaiconLibrary.addIcons() method to incorporate a few icons. Everything was functioning smoothly until I updated my project by running npm install, after which I started encountering the following error. ...

struggling to implement dynamic reactive forms with Angular

Currently, I am experimenting with building a dynamic reactive form using Angular. While I have successfully implemented the looping functionality, I am facing some challenges in displaying it the way I want. <form [formGroup]="registerForm" (ngSubmit) ...

Formatting code works seamlessly in vscode version 1.1.1 when using typescript 1.8.10

Currently running vscode version 1.1.1 with typescript. After upgrading to typescript 1.8.10, I've encountered issues with the 'format code' command not working, auto completion not functioning, and on the fly error checking and problem mat ...

Filter through the array using the cast method

Trying to implement this: let selections = list.filter(obj => obj.type === "myType"); An issue arises with the filter function displaying an error message which states 'filter' does not exist on type 'NodeType' I attempted to ...

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe: <ng-container> <iframe [src]="eUrl" id="flipping_book_iframe" frameborder="0" allowfullscreen="allowfullsc ...

Hold off on progressing until the http.get request in Angular 4 has completed

Currently, I am in the process of creating a new registration form for an app using Ionic and utilizing ASP.Net(C#) for my API. My objective is to validate if a user already exists when the input blur event is triggered. However, I'm encountering an ...

Guide to populating a list in a resolver during navigation and storing the initial item in the ngrx store

I recently incorporated ngrx into my application to manage the data centrally. However, I am facing challenges with loading the initial data and navigating to a default value. This has raised questions regarding the best approach to utilizing ngrx while re ...

Issue with Angular modal not opening as expected when triggered programmatically

I am working with the ng-bootstrap modal component import { NgbModal, ModalCloseReasons } from "@ng-bootstrap/ng-bootstrap"; When I click on a button, the modal opens as expected <button class="btn labelbtn accountbtn customnavbtn" ...

Angular integration with Fine Uploader

I am facing a challenge in incorporating the fineuploader library into Angular 4. A post on provided some insight, but it seems to be aimed at Angular 2. Given the updates in Angular since version 4, I require further guidance. Returning to my issue: Fin ...

Angular 9 introduces a new feature where canActivate now supports Observable<boolean> which provides a more robust error handling mechanism for failed

Currently, I am working with angular9 and rxjs6 while implementing canActivate: Observable feature. However, I encountered an error when attempting to use catchError, as shown in the image below: https://i.sstatic.net/Q0Xuu.png Is there a solution to fix ...

Formatting database values in `where` conditions for strings in TypeORM: A simple guide

I am trying to utilize TypeORM's "exist" method in order to check if a name has already been inserted into the database. My issue is that I cannot determine whether the name was inserted in uppercase or lowercase, leading to potential false validatio ...

Use an if statement in Angular to conditionally add a title attribute with an empty value to HTML

How can I conditionally add the title attribute to a div without creating another div and using ngIf? If the permission is true, I want to include a title in my div. Here's what my current div looks like: <div (click)="goToChangelog()&quo ...

Issues with Angular's router outlet link functionality not performing as expected

I am encountering difficulties trying to create a link to a named router outlet in Angular. Let's focus on the most crucial part of the code: app-routing-module.ts: import { NgModule } from '@angular/core'; import { RouterModule, Routes } ...

The ngOnChanges lifecycle hook is failing to execute

I've encountered an issue where ngOnChanges is not being called when updating a component property. To see the problem and my attempted solutions, please check out the StackBlitz linked below: https://stackblitz.com/edit/angular-becgjq Update: corre ...

Tips for resolving the <!--bindings={ "ng-reflect-ng-for-of": "" }--> bug

Just starting out with Angular and I am having some issues with event binding and property binding in my game-control component. I have a button that, when clicked, adds numbers to an array using setInterval method. I am also passing data between compone ...

What is the best way to refresh or reload a child component in Angular?

I have a transaction.component.html file that displays the app-deal-partners component. Every time the delete function is triggered, I want to refresh and reload the child component, which is the app-deal-partners component. I need to reload <app-deal- ...

Angular: The most efficient method for creating a customized HTML page with unique styles specifically for PDF generation

Struggling with PDF generation and the challenge of preparing hidden HTML is my current hurdle. The backend team has built a PDF generation service that requires passing an HTML string as a parameter. My task is to hide all HTML elements upon clicking the ...

Adding a content security policy in Node.js: A Step-by-Step Guide

Does anyone have tips on setting headers for a content security policy? I attempted it in Angular and configured the headers ...

The error message "Type 'string' cannot be assigned to type 'Condition<UserObj>' while attempting to create a mongoose query by ID" is indicating a type mismatch issue

One of the API routes in Next has been causing some issues. Here is the code: import {NextApiRequest, NextApiResponse} from "next"; import dbConnect from "../../utils/dbConnect"; import {UserModel} from "../../models/user"; e ...