ERROR TypeError: this.hotKeys is undefined (in Firefox) and ERROR TypeError: Cannot read properties of undefined (reading 'set') (in Chrome)

Issue

Now I'm working with Angular project. I'm trying to initialize the Map object in component's constructor:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hint-for-hotkeys',
  templateUrl: './hint-for-hotkeys.component.html',
  styleUrls: ['./hint-for-hotkeys.component.css']
})
export class HintForHotkeysComponent implements OnInit {

  hotKeys: Map<string, string>;
  keys: any;
  values: any;

  constructor() {
    this.hotKeys.set("Alt+N", " - to create a node. (only on page for nodes)");
    this.hotKeys.set("Alt+L", " - to create a link. (only on page for links)");
    this.hotKeys.set("Alt+F", " - to create the field for creating the new property of the link or node.");
    this.hotKeys.set("Alt+S", " - to save a node/a link or changes in it.");
    this.hotKeys.set("Alt+D", " - to delete the field for creating the new property of the link or node. Be sure that you're focused on field you want to delete.");
    this.hotKeys.set("Alt+R", " - to delete a node or a link.");
    this.hotKeys.set("🠔 and ➝", " - a transition between web-pages.");
    this.hotKeys.set("↑ and 🠗", " - a switching between nodes or links.");
    this.hotKeys.set("Esc", " - to go to main page.");
    this.keys = this.hotKeys.keys();
    this.values = this.hotKeys.values();
  }

  ngOnInit(): void {
  }

}

And here errors come: In Firefox.

And in Chrome

I've read some information about bind functions, but when I try this, mistakes appear: Trying bind functions

Or maybe I just don't use it correctly, I dunno.

Solution

You just need to initialize Map with its constructor. You declared it only (initialized with undefined value). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map notice the first line of their example.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hint-for-hotkeys',
  templateUrl: './hint-for-hotkeys.component.html',
  styleUrls: ['./hint-for-hotkeys.component.css']
})
export class HintForHotkeysComponent implements OnInit {

  hotKeys: Map<string, string> = new Map<string, string>();
  keys: any;
  values: any;

  constructor() {
    this.hotKeys.set("Alt+N", " - to create a node. (only on page for nodes)");
    this.hotKeys.set("Alt+L", " - to create a link. (only on page for links)");
    this.hotKeys.set("Alt+F", " - to create the field for creating the new property of the link or node.");
    this.hotKeys.set("Alt+S", " - to save a node/a link or changes in it.");
    this.hotKeys.set("Alt+D", " - to delete the field for creating the new property of the link or node. Be sure that you're focused on field you want to delete.");
    this.hotKeys.set("Alt+R", " - to delete a node or a link.");
    this.hotKeys.set("🠔 and ➝", " - a transition between web-pages.");
    this.hotKeys.set("↑ and 🠗", " - a switching between nodes or links.");
    this.hotKeys.set("Esc", " - to go to main page.");
    this.keys = this.hotKeys.keys();
    this.values = this.hotKeys.values();
  }

  ngOnInit(): void {
  }
}

Answered By - Sergey Sosunov