Angular TypeScript Map 键值对不保存

Question

Within an Angular web application I have a method that is called when the user presses a button. Based on that user action I gather some values from labels and text input fields and want to store them in key, value pairs in a Map object. That Map object in turn should become part of another object and sent to the back-end/RESt API.

However, it seems that the map is never actually saved. I am kind of baffled and confused on how this is happening.

It's the code below (example one of filling the map):

let testMap = new Map([['testers','tester'],['235235','2124124'],['2352352','2124124']]);
console.log('Map Size: ' + testMap.size);
console.log('Map Output: ' + JSON.stringify(testMap));

Output being:
Map Size: 3
Map Output: {}

And the code below (example two of filling the map):

let testMap:Map<string,string> = new Map<string,string>();
testMap.set('tester1','1234');
testMap.set('tester2','4567');

console.log('Map Size: ' + testMap.size);
console.log('Map Output: ' + JSON.stringify(testMap));


Output being:
Map Size: 2
Map Output: {}

Here my tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    //"target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

In both cases it looks like the Map is empty, while it's size is shown correctly. On the back-end side it seems I am also getting an empty Map. Am I missing something here? Or doing something wrong here?

Answer 1

Your testMap has values. you can see it by

  JSON.stringify(Object.fromEntries(testMap))

or

  JSON.stringify([...testMap]);