Angular is unable to modify a property that is marked as read-only

When attempting to update the system value in the object telecom, I encountered an error message at this stage:

Cannot assign to read only property 'system' of object '[object Object]'

this.organization.telecoms.forEach((telecom: Telecom) => 
   telecom.system = 'test'
);
console.log(this.organization);

export class Organization {
    public effectiveDate?: EffectiveDate;
    public identifiers?: IdentifierOrg[];
    public kilometerZones?: KilometerZone[];
    public telecoms?: Telecom[];
}

export class Telecom {
    public system?: string;
    public value?: string;
}

Answer №1

Experiment with initializing classes.

Take a look at this application on this link

export class AppComponent  {
  organization: Organization;

  constructor() {
    this.organization = new Organization();
    this.organization.telecoms = [
      {
        system: 'foo',
        value: 'val'
      },
      {
        system: 'foo2',
        value: 'val2'
      },
      {
        system: 'foo3',
        value: 'val3'
      }
    ]
    this.organization.telecoms.forEach((telecom: Telecom) => 
      telecom.system = 'test'
    );
    console.log(this.organization);
  }
}

export class Organization {
    public telecoms?: Telecom[];
}

export class Telecom {
    public system?: string;
    public value?: string;
}

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

"Resetting the form group array in Angular: A step-by-step guide

When I have a form array and push another form, the new form inherits the validations of the previous form. In the example provided at this link, you can see that the second form displays the name validation. How can I resolve this issue? ...

Leveraging private members in Typescript with Module Augmentation

Recently, I delved into the concept of Module Augmentation in Typescript. My goal was to create a module that could inject a method into an object prototype (specifically a class) from another module upon import. Here is the structure of my folders: . ├ ...

Resizing inputs in Ionic 2 alert boxes

Hello all! I am currently working with the Ionic 2 framework and could use some assistance. I am attempting to make alert inputs that are multi-line or use textareas instead of single line inputs. Any guidance on how to achieve this would be greatly appr ...

Unfinished tags pairing with Angular HTML bindings

I am attempting to display HTML code. I have two separate pieces of code - one for the header and the other for the footer. My challenge is that the header contains unclosed tags, which are closed in the footer. When I try to bind with [innerHTML], Angular ...

What is the method for obtaining the size of the filtered array in Angular 4?

I am currently working with an array of objects that I need to filter based on a search value. component ts filterArray = [ {'id': 1, 'name': 'ABC', 'type': 'IT'}, {'id': 2, 'name&a ...

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

Achieving a Subset Using Functional Programming

Looking for suggestions on implementing a function that takes an array A containing n elements and a number k as input. The function should return an array consisting of all subsets of size k from A, with each subset represented as an array. Please define ...

Utilize ngFor within a ng-template to display dynamic content in a table structure

Currently, I am attempting to loop through a list that is obtained from an API request and then populate the data into a table. The issue I am facing is that this table exists within an ng-template tag, and I am unsure of how to manage this situation. Thi ...

`Next.js: Addressing synchronization issues between useMemo and useState`

const initializeProjects = useMemo(() => { const data: ProjectDraft[] = t('whiteLabel.projects', {returnObjects: true}) const modifiedData: ProjectWL[] = data.map((item, index) => { return { ... ...

The styles and scripts in Angular.json are not functioning properly

Attempting to integrate Bootstrap into my Angular project, but encountering issues with Scripts and Styles in angular.json After trying to copy the path from the folder, I keep getting errors! "styles": [ "C:\AngularProjects\project1\no ...

Learn the art of generating multiple dynamic functions with return values and executing them concurrently

I am currently working on a project where I need to dynamically create multiple functions and run them in parallel. My starting point is an array that contains several strings, each of which will be used as input for the functions. The number of functions ...

Mastering the usage of Higher Order Components (HOC) with both types of props is

I am facing a challenge in implementing HOCs for this specific scenario. I aim to enclose existing components since they share similar functionalities. Below is an abridged version of my current structure: function CreateComponentHere(props: BaseProps): J ...

Jest snapshot tests are not passing due to consistent output caused by ANSI escape codes

After creating custom jest matchers, I decided to test them using snapshot testing. Surprisingly, the tests passed on my local Windows environment but failed in the CI on Linux. Strangely enough, the output for the failing tests was identical. Determined ...

What is the process for obtaining a literal type from a class property when the class is passed as an argument, in order to use it as a computed property

Just a moment ago I posted this question on Stack Overflow, and now I have a follow-up query :) Take a look at this code snippet: import { ClassConstructor } from "class-transformer"; import { useQuery as useApolloQuery } from "@apollo/clie ...

Node.js app hosted on Azure Functions unable to resolve NPM dependencies

I set up a Node (TypeScript) Azure Function application using the VSCode Azure Function extension. While checking the deployment output, I noticed the following log line: Started postDeployTask "npm install (functions)". Despite this, I couldn&a ...

Ways to access the new value of a cell in a Material UI Datagrid through the use of GridCellParams

When trying to access the newly modified value in a cell using the GridCellParams interface, I am faced with the issue that the 'value' property only provides me with the previous value of the cell. This asynchronous behavior is not ideal for my ...

Angular - Ensuring the Independence of Field Pairs During Validation

I need to independently validate two sets of fields. One set is for passwords, which should match each other. The second set is for email addresses, which should also match. The current method I have tried isn't working. Can someone guide me on how ...

How can I use Angular 2 npm start to forward API requests to a different server?

Is there a way to redirect my AJAX requests to another server by using npm start? When attempting npm start --proxy http://localhost:8080, it does not seem to function as intended. ...

Utilize Angular 7 to incorporate properties into a reusable template

Throughout my project, I have been using a template extensively: <div class="col-xs-6 event" *ngFor="let event of events"> <h1>{{ event.title }}</h1> <p>{{ event.content }}</p> </div> This template utilizes various ...

Unable to loop through using ngFor

I have a component that retrieves data from the back-end and groups it accordingly. Below is the code snippet: getRecruitmentAgencyClientPositions(): void { this._recruitmentAgencyClientsService.getRecruitmentAgencyClientPositions(this.recruitmentAge ...