What is the best way to save a Map for future use in different components?

Let's say I define an enum like this:

export enum SomeEnum {
SomeLongName = 1,
AnotherName = 2
}

Within my display components, I'm utilizing an enum map to translate the enum values into strings for presentation on the web app:

enumMap = new Map<number, string>([
[SomeEnum.SomeLongName, 'Some long name.'],
[SomeEnum.AnotherName, 'Another name.']
]);

While it functions correctly within the component, my intention is to reuse this map in other components. However, when attempting to declare it in my whatever.model.ts file, I encounter the following error:

Uncaught TypeError: iterable for Map should have array-like objects

I am exporting it in this manner:

export const SomeEnumMap = new Map<number, string>([
[SomeEnum.SomeLongName, 'Some long name.'],
[SomeEnum.AnotherName, 'Another name.']
])

and in my whatever.component.ts:

import { SomeEnumMap } from './whatever.model.ts';

export class SomeClassComponent implements OnInit {

map = SomeEnumMap;
----------

How can I properly export it so I can reuse it? Generating the map within the component itself works fine, but encountering errors when trying to export it from the model. Unfortunately, Google and the documentation have not provided much guidance.

Answer №1

It seems I made a simple mistake, but I have decided to keep the question posted as it was not flagged by the linter. The issue was that I forgot to include a comma between one of the pairs in my EnumMap, causing it to be non-iterable. Once I added the missing comma, the error was resolved!

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

Startup with a sleek fade-in animation

After multiple attempts following tutorials, I am still struggling to get a div in Angular to fade in when my page loads. Despite not receiving any errors, the implementation is not working as expected. Here's a glimpse of the current state of the ap ...

"Troubleshooting: TypeScript is encountering an issue with a generic type that extends from interfaces

I am working with three different interfaces: X.ts export interface X { id: number; name: string;    dateCreated: string; info: string } Y.ts export interface Y { id: number; name: string;    dateCreated: string; category: s ...

Having trouble importing the datamap library into the HTML of an Angular 2 application

I am currently in the process of developing a small Angular 2 application for educational purposes, and my intention is to incorporate datamaps for the map interface. However, there is no directive available for this library yet, so I am experimenting wit ...

What is the best way to pass form values from child components to parents when utilizing a value accessor implementation?

What is the most effective method to retrieve the values of a child component control group from a parent component? I have currently implemented this using value accessor, but I am curious about the best approach. You can check out the plunker demo I have ...

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

Tips for handling numerous observables in Angular 7

I am working on an Angular 7 application that deals with a total of 20 sensor data. My goal is to receive data from a selected sensor every 5 seconds using observables. For example: var sensorId = ""; // dynamically chosen from the web interface var senso ...

Guide for specifying type when passing a component as a prop

Struggling to successfully pass a component as a prop to a straightforward functional component called RenderRoute: interface RouteProps { component: React.ComponentType; isProtected: boolean; isLoggedIn: boolean; path?: string; exact?: boolean; ...

Trouble communicating between Angular HttpClient POST request and Spring Controller

I'm encountering difficulties while trying to perform a POST request from my Angular frontend service class to the backend Spring controller. Despite my efforts, I am unable to see the log.info message from the controller unless I manually trigger th ...

angular 6's distinctUntilChanged() function is not producing the desired results

I have a function that retrieves an observable like so: constructor(private _http: HttpClient) {} getUsers(location){ return this._http.get(`https://someurl?location=${location}`) .pipe( map((response: any) => response), ...

Serve both .ts and .js files to the browser using RequireJs

In my ASP.NET Core Project, the following files are present: greet.ts export class WelcomMesssage { name: string; constructor(name: string) { this.name = name; } say(): void { console.log("Welcome " + this.name); } } GreetExample.ts import * as ...

What is the best way to display the output of a Set-typed function using a class key in my code?

I'm currently working on developing a function that can return a Set containing the keys of a class. However, I am struggling to determine the correct definition for this function. class Bot { public no01: number; public no02: number; construct ...

Updating Your Child: A Guide

Currently, I have a component that makes reference to a child component with the following code cc: TheChildComponent; @ViewChild('theChildComponent') set details(content: TheChildComponent) { this.cc = content; }; TheChi ...

Leveraging JSON data in subsequent GET request in Ionic 3

My application receives input, concatenates it to a string, and then requests JSON data. The response includes the following first two lines: Now, I need to update my code to be asynchronous. It should make the initial call, wait for a response, retrieve ...

Developing step code for CucumberJS Scenario Outlines

In my feature file, I have the following scenario outlined for testing colors: Feature: Color feature @test Scenario Outline: Test color Given the first color is <COLOR_ONE> And the second color is <COLOR_TWO> ...

Issue with routing in a bundled Angular 2 project using webpack

Having a simple Angular application with two components (AppComponent and tester) webpacked into a single app.bundle.js file, I encountered an issue with routing after bundling. Despite trying various online solutions, the routing feature still does not wo ...

What is the mechanism behind the widening of object literal types in Typescript inference?

I've been reading up on how typescript broadens inferred types but I'm still not entirely clear about what's happening here: type Def = { 'T': { status: 5, data: {r: 'm'}}, } function route<S extends keyof Def> ...

Creating an HTTP gateway with Observables

When dealing with multiple requests, I need to pause them until the authentication of the http request has been confirmed. Essentially, I require an http gate where some requests can pass without authentication, while others need to wait for the token to b ...

Angular: You cannot assign a type of 'void' to a parameter that expects either a UserCredential or a Promise containing a UserCredential

Upon attempting to initiate a new method following a successful registration, I encountered an error in Webstorm: The argument type 'void' cannot be assigned to the parameter type '(value: UserCredential) => UserCredential | PromiseLik ...

How can I set up timers and display their outcomes?

I recently built a timer using RXJS: let timer1value = null; let timeFinish = 30; let finishDate = new Date(); return timer(1000) .pipe( takeWhile(() => new Date() < finishDate), finalize(() => { timeFinish = fini ...

Unlocking the Power of the .data Attribute in Angular's In-Memory Web API

My objective is to seamlessly switch between using in-memory-web-api and a real backend. In the Angular 2 (or 4) Tour of Heroes tutorial, it explains how the server returns data. The in-memory web API example returns an object with a 'data' prop ...