An error occurred while trying to assign a value to a property that is undefined in Angular: attempting to set the

I am working with two interfaces

  export interface ClosureItem{
    id:string;
    name:string;
    visibility?:boolean;
  }

  export interface ClosureAllItems{
      [K:string]:ClosureItem;
      Financials:ClosureItem;
      Risk:ClosureItem;
      Issue:ClosureItem;
      AR2:ClosureItem;
  }

Every time I attempt to assign a value to the properties, an error message pops up saying

 Cannot set properties of undefined (setting 'key')

This is how my code is structured

 myClosureItems!:ClosureAllItems;
 constructor(){}
  ....
  ....

 setitems(){
      let k:string[]=["Financials","AR2","Risk","Issue"];
      k.forEach(element=>{
           this.myClosureItems[element]={id:element,name:element,visibility:true}
      });
 }

*In the second interface, I have specified K:string to prevent index issues when using string names

Answer №1

The variable myClosureItems is currently undefined, so you need to initialize it.</p>
<pre class="lang-js"><code>    myClosureItems = {} as unknown as ClosureAllItems;
    // or
    // myClosureItems: Partial<ClosureAllItems> = {};

For a complete demonstration, check out the link here.

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

The import component path in Angular 4/TypeScript is not being recognized, even though it appears to be valid and functional

I'm currently working on building a router component using Angular and TypeScript. Check out my project structure below: https://i.stack.imgur.com/h2Y9k.png Let's delve into the landingPageComponent. From the image, you can see that the path ...

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks). I have successfully gained access to the chrome object by following guidance from ...

How can a TypeScript Angular directive utilize a function?

Recently, I have been following a unique Angular directive TypeScript pattern that I find really effective. The approach involves giving the directive its own isolated scope by creating a new controller. I encountered a scenario where I needed to invoke a ...

What could be causing Bootstrap to fail in my Angular implementation?

It seems like I have successfully imported everything... angular.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects ...

Typescript-enabled NodeJS REST client

I'm currently working on a nodejs web application using express and I want to access my API. I have experimented with various options, such as restangular and jquery ajax calls. Can anyone recommend some reliable REST client libraries with TypeScrip ...

What is the best way to decouple api and async request logic from React components while incorporating Recoil?

Currently, I find myself inserting my request/api logic directly into my components because I often need to set state based on the response from the backend. On my settings page, I have a function that saves the settings to recoil after the user clicks sa ...

The version of Angular CLI on my local machine is newer than the global

I have been trying to set up a new Angular project using Angular CLI version 13.3.10. However, every time I create a new project, it ends up being in version 13.3.11. Prior to creating this project, I followed the steps of running npm uninstall -g @angula ...

What is the best way to display the arrows on a sorted table based on the sorting order in Angular?

I need assistance with sorting a table either from largest to smallest or alphabetically. Here is the HTML code of the section I'm trying to sort: <tr> <th scope="col" [appSort]="dataList" data-order ...

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

What is the quickest method for setting up types for node packages?

Whenever I need to use typed packages in my Node.js projects, there are two steps I have to take: Firstly, install the original package. For example: npm install express -S Secondly, install its type definition package. npm install @types/express -D I f ...

Typescript: The dilemma of losing the reference to 'this'

My objective is to set a value for myImage, but the js target file does not contain myImage which leads to an error. How can I maintain the scope of this within typescript classes? I want to load an image with the Jimp library and then have a reference to ...

Warning from Google Chrome: Ensure password forms include optional hidden username fields for improved accessibility

Upon visiting the "reset password" route of my single-page application and checking the Chrome browser console, I am presented with a warning message: [DOM] Password forms should contain (optionally hidden) username fields for accessibility: (More info: g ...

Running terminal commands in typescript

Can Typescript be used to run commands similar to JavaScript using the Shelljs Library? ...

Authenticating users with Facebook using Ionic, Angular, Capacitor, and Firebase, as well as implementing role-based authentication

I successfully implemented Facebook authentication in my Android app using Ionic, Angular, Capacitor, and Firebase. The authentication is fully functional. What I attempted: Implementing role-based authentication. My solution: Storing the user's Face ...

Unselecting a line will result in the disabling of all chart lines

Currently, I am working with Primeng and incorporating multiple charts into my view. One feature of Primeng that I have successfully implemented is disabling lines. I am following this particular example: Primeng provides a handy function on their site: ...

What is the best way to effectively utilize Material UI breakpoints in combination with styled components?

Here is my code: const FooterBox = styled(Box)` background: #4e738a; left: 0; right: 0; bottom: 0; width: 100%; color: #ffffff; ${p => p?.theme?.breakpoints.up('xs')} { margin: auto; display: flex; flex-direction ...

After updating my Ionic Android App to Angular 12, it got stuck on a blank white screen with an error message stating: "goog.getLocale is

After successfully upgrading my Ionic App with Angular 11 to version 12, everything seemed fine when running it in the browser. However, when attempting to launch it on an Android device, I encountered a white screen after the splash-screen vanished. My t ...

Having trouble installing Bootstrap using the `npm i bootstrap` command? It seems like the

The npm i bootstrap command is not working when trying to install Bootstrap. Nothing is being added to the packages.json file or node_modules directory. Here are the dependencies listed in the package.json file: "dependencies": { "@angu ...

Angular and the feature of contenteditable

I've been searching for a solution online, but I haven't been able to find any clear way to work with contenteditable events in Angular 6/7. It seems like Angular has a complicated approach to this issue and the feature doesn't appear to be ...

Adjust text size based on device orientation changes

I'm struggling to dynamically change the font size based on screen orientation and width. How can I adjust the font size when switching between landscape and portrait mode? I attempted using an event listener, but it's not updating the font size. ...