A guide on adding an entry to a TypeScript map using the set method and encountering the error 'Cannot read properties of undefined'

While working on my Typescript code, I encountered an issue when trying to add an entry into a map using the set method. The error message says "cannot read properties of undefined".

I have created a variable called 'users' at line 65 and I intend to add numbers corresponding to user names at line 79. However, when attempting to do so, the following error occurs: Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'set').

To see the exact lines causing the error, please refer to this screenshot: focus on line 65 and 79

angulartypescript

Answer №1

When declaring your users, make sure to assign a new map object like this:

users!: Map<string, Number> = new Map<string, Number>();

For future reference, it's best to include code in your post instead of an image. If you do use an image, please provide the full picture so we can see all the necessary details. You mentioned line numbers in your screenshot, but they are not visible to us.

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

Angular 2 FileReader: A comprehensive guide

I have a situation where I need to upload an image in section X and pass the base 64 data of the uploaded image to section Y. But I am encountering some difficulties in section X HTML: <input type="file" id="hotspot" (change)="uploadHotSpot($event)"&g ...

javascriptangulartypescriptfilereader

In Angular 4, I encountered an issue where adjusting the height of the navigation bar caused the toggle button to no longer expand the menu in Bootstrap

In the process of developing an angular application, I encountered a situation where I needed to adjust the height of the nav bar using style properties. After making the necessary changes, everything was working fine. However, a problem arose when I mini ...

angulartypescriptbootstrap-4

Tips for saving data from an observable into a variable or property

I've been diligently working on a project utilizing both Angular and Firebase/Firestore. Here is the code snippet that I have implemented: this.cadet = this.cadetCollection.valueChanges().subscribe(x => { this.cadetName = x[0].Cadet; this.cad ...

angularfirebasegoogle-cloud-firestoreangularfire2

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

javascripttypescriptarguments

The useEffect hook is triggering multiple unnecessary calls

Imagine a tree-like structure that needs to be expanded to display all checked children. Check out this piece of code below: const { data } = useGetData(); // a custom react-query hook fetching data from an endpoint Now, there's a function that fin ...

javascriptreactjstypescriptreact-hooksreact-query

Exploring how Jasmine tests the checkbox change handler function in the latest version of Angular (12)

I'm attempting to create a basic test function for a checkbox change event, but I'm encountering some issues running it. The error message states "Spec has no expectations," and the handler function is not included in code coverage. Template: &l ...

angulartypescriptjasminekarma-jasmineangular-test

Component in Angular with an empty variable in TypeScript

I'm encountering an issue on my web page where I have a loop calling a component multiple times. I successfully pass data to the component, but the problem arises when I try to display the value of an object in the component. In the component's H ...

angulartypescriptcomponents

Troubleshoot: Issue with binding data from DynamicComponentLoader in Angular 2 template

My implementation involves the utilization of DynamicComponentLoader and is based on the Angular2 API Guide. https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html The code structure I have set up looks like this: import {Page} fro ...

typescriptangularionic2

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

javascripthtmlangularpipe

Leveraging Window Object in Custom Hooks with NextJS

ReferenceError: window is not defined This issue arises on the server side when NextJS attempts to render the page. However, it is possible to utilize window within the useEffect hook by following the guidance provided here. I am seeking advice on creati ...

javascriptreactjstypescriptreact-hooksnext.js

Challenges with Property Decorators in Angular 6

Hello there, I've been testing out this sample decorator code and encountered an issue that I can't seem to figure out. The error message I received was "cannot read property 'firstname' of undefined". It appears that the 'this&apo ...

javascriptangulardecorator

The Angular Material Stepper ng-template is missing a defined context variable for custom icons which is causing

My endeavor involves leveraging an ng-template alongside the matStepperIcon property to customize Angular Material's matStepper icons. I am also aiming to transmit some data by utilizing ng-container and *ngTemplateOutlet, yet facing partial success. ...

angularng-templatemat-stepperangular-material-11

Express server experiencing issues with generating Swagger documentation

I've been working on an Express API and decided to implement documentation using Swagger and JSDoc. However, the documentation is not working as expected. Here's how I've set it up: docs.ts: import swaggerJSDoc, { Options } from "swagg ...

javascripttypescriptexpressswaggerjsdoc

Why doesn't Angular 6 show the results of Next right away?

Although I don't have the code on hand, this is more of a theoretical question that I believe can still be answered. In my scenario, there is a MsgService that provides messages to components. When I update or set messages in the service from one of ...

angularrxjsobservablesubject

Custom fields can be included in the `package.json` file during the build process in an Angular application

My Angular application is up and running smoothly, with a handful of dependencies listed in its Package.json file: { "name": "angular-app", "version": "1.0.0", "scripts": { "ng": "ng ...

angularpackage.json

Tips for dynamically loading Angular modules once they are in production

My application is currently in production, and I am looking to enhance its flexibility when adding new features. These features would essentially be additional modules. In Angular, it is necessary to explicitly define all dependent submodules and componen ...

angulardeploymentbuildangular-cli

How to declare and initialize a variable in Angular 2 using TypeScript

I'm currently working with angular 2 and I'm having trouble understanding how to set a variable. The variable _isLoading is being set in "this.observable.filter((event)" but it doesn't seem to change in the template. This is my TypeScript co ...

typescript

The higher-level modules in Angular 2 are having trouble locating their declarations

I have a cascading module structure, categorized by different features: /app /lib (not considered a module) /pipes capitalize.pipe.ts /portal /dashboard /public Each module is designed to be lazily loaded with their own routes. Below ...

angular

Issues encountered while attempting to utilize the delete function within a CRUD process involving Angular 8, Laravel, and JWT authentication

Currently, I am developing a Single Page Application using Angular 8 on the frontend and Laravel on the backend. The frontend consists of a form with options for users to either edit or delete a user. When the delete button is clicked, I capture the curren ...

angulartypescriptecmascript-6rxjssingle-page-application

What distinguishes display:none from *ngIf = 'false'?

The visibility:hidden property in CSS hides an element without changing its position or affecting the layout of other elements on the page. On the other hand, setting ngIf = 'false' in Angular removes the element from the DOM entirely, effectivel ...

angular